知识点 · Vue 学习笔记

[TOC] # `$createElement` Element UI 中 Message 消息提示，MessageBox 弹框，Notification 通知组件怎么插入自定义的HTML？ ~~~ const h = this.$createElement; this.$notify({ title: '这是提示标题', message: h('div', { on: { click: handleClick }, '查看详情'), dangerouslyUseHTMLString: true }); ~~~ 这种方式还有一个弊端，如果有多个嵌套层，写起来相当复杂和混乱，用 JSX 的方式重新 > [https://www.jianshu.com/p/84cd41a5009c](https://www.jianshu.com/p/84cd41a5009c) # 对于不想被响应式的数据触发顺序： ``` beforeCreate constructor -> 这之间会 Init injections & reactivity created ``` 所有对于一些数据不想被响应式的化，可以放置在 `created` 中赋值： ``` ... private cashViews!:string[]; //待优化，点击刷新 ... created() { this.cashViews = ['List', 'Detail']; //待优化，点击刷新 } ... ``` # `this.$set` ``` // 给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新 // 如果想要有响应式效果 // 1. 就需要提前，在对象中先把属性声明好在aa中一开始就添加好age属性，哪怕不给值 // this.aa.age = 18; // 2. 如果确实需要动态的给aa对象添加age属性，那么我们可以用到vue中提供的$set方法 // 这个方法，可以动态的给数据添加响应式的属性！ this.$set(this.aa, "age", 18); //或者 Vue.set(this.aa, "age", 18) ``` 什么时候用`$set`? 1. 当给对象动态添加属性的时候，需要用`$set` 2. 当想要通过数组的下表给元素赋值的时候，需要用`$set` > [不触发vue响应式更新的4种情况](https://www.jianshu.com/p/5574c5664d3f) # Vue中 `Vue.nextTick()` 和 `this.$nextTick()` 常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到 dom 。**因为赋值操作只完成了数据模型的改变并没有完成视图更新**。 ``` Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: 'not updated' } }, methods: { updateMessage: function () { this.message = 'updated' console.log(this.$el.textContent) // => 'not updated' this.$nextTick(function () { console.log(this.$el.textContent) // => 'updated' }) } } } ``` [浅析 Vue 2.6 中的 nextTick 方法](https://segmentfault.com/a/1190000018328525) # vue 指令 # Vue.extend # computed 与 $watch ## computed 如果需要多于一个表达式的逻辑，应当使用**计算属性**。计算属性默认只是 `getter`，不过在需要时你也可以提供一个 `setter`： ```javascript // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... ``` 现在在调用 `vm.fullName = 'John Doe'` 时，`setter` 会被调用，`vm.firstName` 和 `vm.lastName` 也会有相应更新。 ## $watch # [v-model 和 v-bind](https://blog.csdn.net/transformer_wsz/article/details/80245962) ## v-model `v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值而总是将 Vue 实例的数据作为数据来源。实际上，由于 `v-model` 只是语法糖， `<input v-model="message">` 与下面的两行代码是一致的： ~~~ <input v-bind:value="message" v-on:input="message = $event.target.value" /> <input :value="message" @input="message = $event.target.value" /> ~~~ ## v-bind ~~~ <p v-bind:class="someclass"></p> ~~~ 如果不加 `v-bind` 那么 `someclass` 就是个常量，没有任何动态数据参与。当加上 `v-bind` 之后，它的值 `someclass` 不是字符串，而是vue实例对应的 `data.someclass` 这个变量。 ## v-bind与v-model区别下面两句是等价的： ~~~ <input v-model="message"> <input v-bind:value="message" v-on:input="message = $event.target.value" /> ~~~ 那么 `v-model` 其实就是 `v-bind` 和 `v-on` 的语法糖。看到此处，是不是豁然开朗呢？ # [vuex](https://vuex.vuejs.org/zh/) Vuex 背后的基本思想，**借鉴了 Flux、Redux、和 The Elm Architecture**。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。要注意一个应用或是项目中只能存在一个Store实例！！ Vuex 和单纯的全局对象有以下两点不同： 1. Vuex 的状态存储是响应式的 2. 你不能直接改变 store 中的状态 vuex有6个概念 * Store(最基本的概念)（仓库）在使用Vuex的时候通常会创建 Store 实例 `new Vuex.store({state,getters,mutations,actions})` 有很多子模块的时候还会使用到`modules`。要注意一个应用或是项目中只能存在一个Store实例！！ * State (数据) Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。 * Getters(可以说是计算属性) Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。 * Mutations Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。第二个参数：提交载荷（Payload）。 * Actions Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 * Modules Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：用 `commit()` 方法来调用，改数据的唯一方式就是显式的提交 mutations ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义属性（数据） var state = { count:6 } // 定义 getters var getters={ count(state){ return state.count } } // 定义 actions ，要执行的动作，如流程的判断、异步请求 const actions ={ // ({commit,state}) 这种写法是 es6 中的对象解构 increment({commit,state}){ //提交一个名为 increment 的变化，名字可自定义，可以认为是类型名，与下方 mutations 中的 increment 对应 //commit 提交变化，修改数据的唯一方式就是显式的提交 mutations commit('increment') } } // 定义 mutations ，处理状态（数据）的改变 const mutations ={ //与上方 commit 中的 ‘increment' 相对应 increment(state){ state.count ++; } } // 创建 store 对象 const store = new Vuex.Store({ state, getters, actions, mutations }) // 导出 store 对象 export default store; ``` # vuex 中的 store 和 $store 的区别 ~~~ <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userName }}</router-link> <router-link to="/login">{{ this.$store.state.userName }}</router-link> ~~~ `$store` 是挂载在 Vue 实例上的（即`Vue.prototype`），而组件也其实是一个Vue实例，在组件中可使用 this 访问原型上的属性，`template` 拥有组件实例的上下文，可直接通过` {{ $store.state.userName }}`访问，等价于 script 中的 `this.$store.state.userName`。至于 `{{ store.state.userName }}`，script 中的 data 需声明过 store 才可访问。 # mixins mixin 的作用是多个组件可以共享数据和方法，在使用mixin 的组件中引入后，mixin 中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。引入 mixin 分全局引用和局部引用 ```dart // 全局引用 import mixin from './mixin' Vue.mixin(mixin) // 在组件中引用 import '@/mixin'; // 引入mixin文件 export default { mixins: [mixin] } ``` > [vue的mixin的使用](https://cn.vuejs.org/v2/guide/mixins.html)) # [axios](https://github.com/axios/axios) axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： * 从浏览器中创建 XMLHttpRequest * 从 node.js 发出 http 请求 * 支持 Promise API * 拦截请求和响应 * 转换请求和响应数据 * 取消请求 * 自动转换JSON数据 * 客户端支持防止 CSRF/XSRF axios 不支持 jsonp，可以选用： ``` npm install fetch-jsonp ``` # Vue.prototype - vue3 中被替换 app.config.globalProperties # Vue.use # ~~vue-resource~~ vue2.0 之后，官方就不再对 vue-resource 更新，而是推荐使用 axios。