乐趣区

重读Vuejs文档

jiezi

这是学习笔记，仅供自己学习使用。

重读之后，一些细小的点（只是补缺自己所缺的点）。

生命周期

  • 所有的声明周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 * 你不能使用箭头函数来定义一个声明周期方法 #。这是因为箭头函数绑定了父上下文。因此 this 与你期待的 Vue 实例不同。

（注：箭头函数的 this 根据所在环境，换句话说，就是上下文；普通函数的 this 指向声明时的对象，就是调用函数的对象。）

  • mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个试图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
mounted: function () {this.$nextTick(function () {// Code that will run only after the entire view has been rendered})
}

细小的点

  • v-model.trim 绑定属性，将不能输入空格。（可用于表单验证）
  • 只有当实例被创建时就已经存在于 data 中的属性才是响应式的。（如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。）
  • 计算属性、侦听器、方法：
    1）计算属性是基于响应式依赖进行缓存的，也就是说，只有在相关响应式依赖发生改变时才会重新求值；
    2）侦听器用在数据变化时执行异步或开销较大的操作时；
    3）能用计算属性就用计算属性。
  • 动态 class：<div :class=”[{active: isActive}, errorClass]”></div>
  • 绑定内联样式：<div :style=”{color: activeColor, fontSize: fontSize + ‘px’}”></div>(emmm 这个一般会用，写了内敛样式是要被人揍得！)
  • Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。若是想要改变如此状况，可以使用 key 管理可复用的元素。
  • v-if 和 v -show：
    1）v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
    2）v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    3）v-if 有更高的切换开销，而 v -show 有更高的初始渲染开销。因此，需要非常频繁地切换，则使用 v -show 较好；如果在运行时条件很少改变，则使用 v -if 较好。

没怎么用过的点

1、动态参数 …

重点

1、由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

1）当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue;
2）当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

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

为了解决第一类问题，以下两种方式都可以事项和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，可以使用 splice。

vm.items.splice(newLength)

平时中用过索引直接设置一个数组时无效的，一路 set 到底才有效，现在才知道是怎么回事了！！！！

2、还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
    data: {a: 1}
})
// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可是使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。
若需要为已有对象赋值多个新属性，比如使用 Object.assign() 或_.extend()。

Object.assign(vm.obj, {
    xxx: 'xxx',
    yyy: 'yyy',
})
退出移动版