vue查缺补漏-白红宇

1.响应式数据的追踪

一般情况下，data的属性变化，视图也会发生变化。但当用object.freeze()时会阻止修改属性,系统也无法再继续追踪，例如：

var obj = {  foo: 'bar'}Object.freeze(obj)new Vue({  el: '#app',  data: obj})复制代码


      
     {
   { foo }}
  
       
     
    
复制代码

2.生命周期

beforeCreate 组件刚刚创建好，但是属性并没有被绑定

create 属性被绑定成功，$el未存在，dom也没生成

3.视图更新

当组件运用了v-once，data值更新的时候，被绑定的视图不会更新，v-once只能执行一次性地插值，当数据改变时，插值处的内容不会更新。

这个将不会改变: {
   { msg }}复制代码

4.条件渲染

v-if当渲染条件为假时，组件则不会被渲染，当第一次条件为真时才会渲染为真。 v-show不论条件如何，组件都会被渲染，只是进行简单的css切换。 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 v-for 具有比 v-if 更高的优先级

5.v-for与key

使用v-for的时候为了便于跟踪每个节点的身份，需要为每一项提供一个唯一的key值，每项唯一的id值。例如：

6.变异方法--会改变原来的数组

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

7.替换数组

filter()

slice()

concat() 当利用索引值设置一个项时、当修改数组的长度时,vue不会注意到数组发生了变化，例如：

var vm = new Vue({  data: {    items: ['a', 'b', 'c']  }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的复制代码

为了解决上面的问题，可以用以下方式即可以实现上面的功能又能做成响应式的。

// Vue.setVue.set(vm.items, indexOfItem, newValue)复制代码

// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)复制代码

//可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：vm.$set(vm.items, indexOfItem, newValue)复制代码

Vue 不能检测对象属性的添加或删除

var vm = new Vue({  data: {    a: 1  }})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的复制代码

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

var vm = new Vue({  data: {    userProfile: {      name: 'Anika'    }  }});//可以添加一个新的 age 属性到嵌套的 userProfile 对象：Vue.set(vm.userProfile, 'age', 27)//还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：vm.$set(vm.userProfile, 'age', 27)复制代码

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。

vm.userProfile = Object.assign({}, vm.userProfile, {  age: 27,  favoriteColor: 'Vue Green'})复制代码

8.处理原生dom

可以通过函数将$event作为参数传递进去，进而访问原生dom事件。

methods: {  warn: function (message, event) {    // 现在我们可以访问原生事件对象    if (event) event.preventDefault()    alert(message)  }}复制代码

9.v-model 表单输入绑定

修饰符

.number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number修饰符

复制代码

.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

复制代码