vue笔记（一）

一、 v-cloak 的用法

<div v-cloak>
  {{ message }}
</div>
//css
[v-cloak] {
  display: none!important;   //添加 !important防止被优先级别高的样式覆盖
}

应用场景：
① 防止页面加载时出现 vue 的变量名
② v-html 可以解析html语句，但是可能遭到xss攻击

二、视图不更新情况

1.Vue 不能检测以下变动的数组：
① 当你利用索引直接设置一个项时，vm.items[index] = newValue
② 当你修改数组的长度时，例如： vm.items.length = newLength

2.不能检测到对象属性的添加或删除。属性必须在 data 对象上存在才能实现响应
解决办法：
①this.$set(this.myObject,‘a’,1)或Vue.set(this.myObject,‘a’,1)
②this.myObject=Object.assign({},this.myObject,{‘a’:1})，这时对象重新赋值，vue给每个属性都加上set和get，实现响应式
// 注：Object.assign(this.myObject, { a: 1})这种不会响应，第一个是返回的值，也就是说对象的指针没有发生变化
3.异步更新队列
解决mounted时，DOM没有完全渲染完的时间差（16ms）
Vue.nextTick(callback)

不需要双向绑定的实现方式：
1.不双向绑定、不渲染视图的不放进data，在created中用this.xxx即可。
2.Object.freeze() //冻结对象，不能向这个对象进行属性增删改查等
3. v-once:这个将不会改变: {{ msg }} //只渲染元素和组件一次，随后的渲染，都会当作静态内容并跳过

三、加key(一定要具有唯一性)场景

使用场景：
1.v-for的时候要加key
2.同一组件切换，想要重新走一遍钩子函数
3.触发过渡。加入key有过渡效果

四、@hook：监听子组件生命周期加载完成

<hello @hook:mounted="kk" @hook:created="qq"></hello>

五、 透传

this.$attrs是没有写在props里的其他绑定。可以通过v-bind="$attrs"传入内部组件
this.$listeners是没有用.native的其他监听。可以通过v-on="$listeners"传入内部组件
vuex（麻烦，不要啥啥都写vuex里）、
vue Bus（难定位问题）
provide&inject也可以实现祖宗辈的传值，但是inject进来的值watch不到变化，如果需要响应式就不能用。