重读Vue.js文档

2019年9月16日 243次阅读 来源: 喆喆

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

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

基础内容

生命周期

  • 所有的声明周期钩子自动绑定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、动态参数

<a v-bind:[attributeName]="url">...</a>

重点

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',
})

深入了解组件

一些小点点

  • 所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。
  • $refs只会在组件渲染完成之后生效，并且他们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问$refs。
  • 混入：数据合并，以组件数据优先；同名钩子函数将合并为一个数组，都被调用；对象（比如methods、components和directives），将被合并为一个对象，两个对象键名冲突时，取组件对象的键值对。

重点

1、当 .sync修饰符与$emit同时使用时，会有奇怪的现象。

// 第一组
<father :father-num.sync="test"></father>
this.$emit('update:father-num', 100); // 无效
this.$emit('update:fatherNum', 100); // 有效

// 第二组
<father :father-num="test"></father>
this.$emit('update:father-num', 100); // 有效
this.$emit('update:fatherNum', 100); // 无效

以上两组主要区别在于加了.sync后，’update:’后面的内容写法。
官网指出，推荐$emit使用kebab-case（短横线）；
而对于.sync，推荐以update:myPropName的模式触发事件。
emmm还是没有解释清楚上面两种现象出现的原因！！！！

    原文作者：喆喆
    原文地址: https://segmentfault.com/a/1190000020337209
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞