脚本宝典收集整理的这篇文章主要介绍了vue文档阅读笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
????当一个vue实例被创建时,它向vue响应式系统中加入了其data能找到的所有的属性,当这些属性值变化时,视图将会响应。
是创建的时候才会去监听,数据才是响应式的。如果在创建之后向一个对象中添加一个属性,这个属性不会被监听到,不是响应式的。在创建对象的时候,如果能预计有什么属性,应该先初始化对象,设置一些初始值。
???? Object.freeze()会冻结一个对像,阻止修改现有的对象。如果使用了和这个方法,页面不会再监听这个对象了。
???? 不要在选项属性或者回调函数上使用箭头函数。箭头函数是和父级上下文绑定的,this在所有的生命周期中,不一定是指向vue实例。
???? v-once: 一次性的绑定值,当数据改变的时候,不会再随之变化了,
???? 在模板中放入太多的逻辑会让模板过重且难以维护。对于复杂的逻辑,不推荐放在模版里面,应该使用计算属性
???? 计算属性是基于依赖来进行缓存的。只有在相关的依赖发生变化的时候才会重新计算。方法其实可以得到和计算属性相同的结果。
不同的是,计算属性在依赖没有变化的时候,不会更新,有缓存。
???? 缓存的意义:如果有个结果计算会消耗大量的性能才能计算出来,如果使用函数,那每次调用这个结果都要执行一次函数,性能消耗打,使用
计算属性,在其中依赖没有变化的时候不会重新计算,性能消耗比较小
???? watch:当需要在数据变化时执行异步或者开销比较大的操作使用
???? 在写代码的时候,如果某个结果依赖一个值的变化,并且计算这个结果比较复杂,推荐使用计算属性。要善用计算属性。
???? 尽量不要写在模版里面,模版应该是简洁的。
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
???? v-if和v-for一起使用的时候,v-for优先级比v-if高
???? 可以通过一个对象来迭代,第二个参数为键名,第三个参数为索引
<div v-for="(value, key, index) in object">
{{index}}{{ key }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
???? “就地复用”策略:
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
???? v-for可以使用方法:可以用来过滤处理数据了
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
作用:主要是为了高效的更新虚拟DOM。提高遍历性能。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
当页面的数据发生变化时,Diff算法只会比较同一层级的节点:如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。
以下变异方法可以触发视图更新
⚠️ 以下几种方法不能检测数组变化:
vm.items[indexOfItem] = newValue
vm.items.length = newLength
解决方法:
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
???? vue不能检测对象属性的添加或者删除
解决方法:
???? 在方法中传入$event,可以访问DOM原生事件对象
<button v-on:click="warn($event)">
Submit
</button>
???? 事件修饰符
???? v-model不会在输入法组合文字过程中更新,可以使用input来监听这个过程。
????修饰符:
???? 动态组件:通过is绑定组件名称, 有些标签里面只能使用固定标签,不能直接写组件名称,可以通过is来使用组件
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
<table>
<tr is="blog-post-row"></tr>
</table>
???? 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
???? props是通过引用传入的,所以子组件修改会影响父组件的变化
???? prop 会在一个组件实例创建之前进行验证 (beforeCreated)
???? interitAttrs
在版本 2.4 之前,默认情况下父作用域的不被作为props特性绑定的属性,将会作为普通的 HTML 属性,应用在跟元素上。设置 interitAttrs 为 false,之后,不会应用到跟元素上。