面经之vue

基本指令

---

v-for v-on v-bind v-text v-if v-else-if v-else v-show v-model v-pre v-cloak v-once

v-on 简写 @，@事件名。修饰符 stop 阻止事件冒泡。prevent 阻止默认事件 once 只执行一次。

v-bind 简写 :，:属性，常用于样式，组件传值。:style :xxx

样式可用对象，数组进行配置。:class = "{active:isActive}",isActive 布尔值，true则active添加，false，则active不添加。

v-if 控制dom结构的显示隐藏，dom结构消失。

v-show 控制dom结构的显示隐藏，dom结构不消失，相当于display:none;

v-model 常用于 input 输入框中。修饰符 .trim 首尾空格过滤，.number 转数字 .lazy 与change事件同步，类似onbulr事件

v-once 只渲染元素或组件一次。dom再次更新时会被当成静态内容跳过。

生命周期

---

image

beforeCreate 周期内，由于未初始化，所以无法获取data，props数据。created中，可以获取得到data，props值。mounted后，就可以获取dom结构。beforceDestroy中，移除事件监听。

created和mounted中，都可以进行ajax请求，两者的区别是created页面视图未出现，请求信息过多，会长时间白屏。mounted不会承诺所有视图都出现，可以加载大多数视图。一般在mounted中请求

Vue.nextTick()，vm.$nextTick() 全局，实例方法

---

视图更新后的回调，修改数据后，可获取更新后的dom，经常来进行 滚动视图的刷新，轮播视图的刷新等

Vue.set vm.$set

---

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

这里执行的的是对象的操作，在vue中，对数组执行 push，pop，shift，unshift，splice，sort，reverse操作，会刷新视图。使用下标对数组内的某一个具体值进行更新，不会刷新刷图，可以是用set方法来实现或splice方法实现。

image

image

image

data

---

vue的数据，可以是对象，可以是函数。在书写vue的组件时，data必须是一个函数，返回一个对象。

为什么是一个函数而不是一个对象。

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

props 父子传值

---

子组件接受父组件的数据。

props:['a','b']或

props:{

a:{type:String,default:'test'},b:{type:Number,require:true}

}

子=>父 传值 自定义事件，并触发

---

father.js------

-------- methods:{ formData(dataOne){处理子组件传回来的数据}}

son.js

事件中触发 this.$emit('passData',dataOne)

兄弟组件传值，一般新建一个vue空实例化对象。兄弟通过空实例对象触发和监听数据，也是很方便的。但是在实际开发中，通信比较复杂。更多的是使用vuex来进行通讯。

center.js ----- import Vue from 'vue' export default new Vue

a.vue ----- import center from './center.js' 事件中 触发 center.$emit('send',data)

b.vue ----- import center from './center.js' created 中监听 center.$on('send',data=>{操作data})

小 tips

---

center.$emit('send',(data)=>{处理data});

center.$on('send',(cb)=>{cb && cb({数据对象})});

传递一个方法，在$on中监听，在回调函数中执行该方法并可以传值给该函数。

computed 计算属性

---

computed计算属性和对象的get，set方法类似。对 vm.aPlus 取值，就执行了 get方法。会返回 this.a + 1;对它赋值，就会执行 set 方法，改变 this.a的值。计算属性会缓存数据，除非数据进行改变。funtion中的this指向vue的实例对象。

image

watch

---

基本写法。a:function(val,oldVal){} // 显示原值与新值

立刻调用，执行一次。 immediate属性。监听整个对象，如有对象的值改变，则新旧值一致。

computed，watch，method，都可以改变data的值。执行顺序一般是 computed，watch，methods。computed刚开始加载就会使用到，获取值，有缓存效果。watch监听数据，数据改变则执行对应的函数。methods是方法 ，需要主动触发。大多数情况下，computed已经满足需要，但是computed不提供set方法，需要你手动添加。使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的

image

slot 插槽

---

常用于父组件向子组件传递视图。也可以写模板代码。

具名插槽 子组件 slot 标签内书写name 属性，父组件的标签书写同样的name属性，就会一一对应。没有书写name属性性，就会默认添加到slot标签中。

dom结构以子组件的slot为准。

image

image

slot可以书写默认内容，若父组件不传递，则显示默认内容

image

image

ref

---

vue不建议操作dom，那么要获取到具体的组件的方法或者属性时，可以用 ref 来获取，相当于 html标签中的 id 属性。可以获取到当前组件的所有信息或者dom结构。

在方法中可以用 this.$refs.xxx来获取到想要获取的组件或者dom结构。

is

---

is 属性，常用来动态显示组件。 xxx为显示的组件名称

keep-alive

---

缓存不活动的组件，不会销毁。即再次进入的时候，缓存组件的生命周期不会被触发，但是会触发 activated 和 deactivated 这两个生命周期。

key

---

遍历时，通常vue会提醒你添加一个key值。这个key值是唯一值，最好使用属性中不变化的值，例如 item中的id等，性能会好一些。不要使用index下标，如果要遍历的数据不改变，不过一般这不可能，使用index影响不大。由于虚拟DOM是通过 diff 算法实现的原因，dom结构能够复用，就会够减少很多运算，优化性能。key的作用主要是为了高效的更新虚拟DOM。

阅读大佬文章请移步 为什么使用v-for时必须添加唯一的key? - 掘金

添加全局方法

---

common.js 书写方法并 export 出来，在main.js中引入，挂靠在 Vue.prototype.xxx = xxxx 上。组件中就可以使用。

mixins 混入

---

• 混入 具体可以看官网文档哈，个人理解是创建一个公共的js文件，可以书写组件的属性和方法，生命函数等等。data 将会合并，有冲突的以组件数据优先，生命周期不存在冲突概念，都会执行，以外部优先。像 对象类的值，比如 methods , components , directives 将会合并成同一个对象，若 key 值相同，按照对象合并的原则来合并，后面的 value 值会覆盖前面的 value 值，即组件的方法会覆盖 外部的方法。