vue2 实践

1. props 带不带冒号的区别

 
<child1 ref="child1" :msg="{name:'bill'}">

首先冒号是v-bind的缩写，不带冒号后面是字符串，带了冒号就是数据绑定，引号里面的内容是变量或者表达式,
组件内不能修改props的值，同时修改的值也不会同步到组件外层，即调用组件方不知道组件内部当前的状态是什么

2. computed属性，可以set，但是设置的是data返回的数据，不能设置自身。

如果计算属性是对象的话，可以设置他的属性。

3. 组件的生命周期函数是在template标签里的数据发生变化时候触发update

数据可能更新了，但是没有绑定到dom上面的话，不会调用update钩子函数。

4. 给变data的第二季属性的值，data不会更新，导致组件不会更新

所以在这个时候应该用Object.assign()重新生成新的对象。第一级属性值更新的话，data是更新的！

5. 动态绑定style的话，后面的样式值不能加分号

  style = {
              color: "rgb(66,180,232)"
       };
  //下面渲染不出来
    style = {
              color: "rgb(66,232)";
       };

6. filter 过滤器

vue2.0 的时候把过滤器移除了，现在2.10又加了上去，

定义filter过滤器：
写在实例Vue内部的是局部过滤器，

new Vue({
  filters:{
  formatMoney: function (value){
      return "$"+value.toFixed(2);
   }
 }
})

写在外部的是全局过滤器

Vue.filter("money",function (vaule,type) {
    return "￥" + vaule.toFixed(2) + type;
})

组件内调用：

//1.x的写法，2直接wrap('before','after')调用
Vue.filter('wrap',function (value,begin,end) {
  return begin + value + end
})

补充下：一个竖线 | 在js中是二进制运算

7. watch监测对象或者数组，不是替换对象或者数组，newVal和oldVal是同一个值。

注意：在变异（不是替换）对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

8. 为组件绑定原生事件

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

9. 2.1.6computed在beforeMount前面执行的，vue2.2.1刚好相反

10. v-for和v-if在同一个标签使用的话，v-for的优先级高于v-if

如果在同一标签使用，v-if就是用来过滤v-for里面的数据的，先走if的话用template套在外面

今天并列使用的时候遇到的巨坑：

结果topics只有三条数据，但是渲染出9条数据，官网说的很清楚：with v-if

11.keep-alive 缓存组件在内存中，再次进入该页面不会重新渲染，用于保存页面的原始状态

即使设置了keep-alive组件的beforeUpdate和updated钩子函数还是会调用的。

activated和unactivated钩子是在keep-alive组件里面被调用的，不是第一次进入keep-alive组件的话，调用顺序是：
beforeRouteEnter->activated->beforeUpdate->beforeRouteEnter的next函数

组件缓存问题

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!