vue总结3

• MVVM

不双向绑定的实现方式：
1.不双向绑定、不渲染视图的不放进data，在created中用this.xxx即可。
2.Object.freeze()后data没有响应式
3. v-once:<span v-once>这个将不会改变: {{ msg }}</span>

更新检测

一、数组：

场景：
1.数组array[0]=1,视图不更新
2.array.length=3;视图不更新
解决：
1.this.$set
2.Vue.set
3.vue里对数组的六种方法进行了响应式处理。

二、对象：

vue不能监测对象属性的添加和删除，可以用以上方式添加属性。
Object.assign也可以，但是要注意：
1.Object.assign(this.aaa,{name:"caroline"})，第一个是返回的值，也就是说对象的指针没有发生变化，向其中添加了name属性，name并没有实现响应式。
2.this.aaa=Object.assign({},this.aaa,{name:"caroline"})，这时对象重新赋值，vue给每个属性都加上set和get，实现响应式。
3.同2，其实可以this.aaa=Object.assign({name:"caroline"},this.aaa)，同样是给对象重新赋值。2更好理解。

• DOM

为什么要加key？
vue在渲染时为了高效，会尽可能的复用元素，如果v-if控制两个input的框的显示与否，这两个输入框是没有变化的，加入key则会被认为是两个。
使用场景：
1.v-for的时候要加key
2.同一组件切换，想要重新走一遍钩子函数
3.触发过渡。加入key有过渡效果

<transition>
	<span :key='aaa'>{{aaa}}</span>
</transition>

v-for不要和v-if一起用：
解决：
先把数据过滤完再遍历。
v-for遍历对象：arguments1属性值，arguments2属性名，arguments3从0开始的下标值

{{}}的闪现问题
{{}}=>会出现网络很慢的情况下的闪现不解析 等同于v-text
v-html 可以解析html语句，可以转移，但是可能遭到xss攻击

{{}}闪现不编译的情况，可以通过v-cloak编译完才显示命令解决

监听子组件生命周期的方法
可以监听各个生命周期函数
@hook:created = ‘kk’ 监听子组件生命周期created完成后调用的方法
@hook:mounted = ‘kk’ 监听子组件生命周期mounted完成后调用的方法

• tips：

不要在选项属性或回调上使用箭头函数

使用组件的时候添加一些 class，会加到组件的最外层元素上，对于带数据绑定 class 也同样适用。

使用<template v-if>时不会渲染template元素。

vm.$watch可以动态加监听，手动销毁需要先接一下vm.$watch的返回值，然后调一下。

动态变量的优先级更高 <input value='22' :value='777'/>

methods的简写：

plus: function () {
      this.a++
    }
//es6的对象方法简写
plus () {
      this.a++
    }