vue笔记(1)

原创 乘风逐月 随笔 Vue 67阅读 8 天前 举报
一、生命周期函数

beforeCreate、created;//创建前、创建完成
beforeMount 、mounted;// 挂载前、挂载完成
beforeUpdate 、updated; // 更新前、更新完成
beforeDestory 、destoryed。// 销毁前、销毁完成

生命周期钩子的 this 上下文指向调用它的 Vue 实例。
注:不要在选项属性或回调上使用箭头函数,因为箭头函数是和父级上下文
绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致" Uncaught
TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function "之类的错误。

二、响应式属性:

1.当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对
象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响
应”,即匹配更新为新的值。
但是只有当实例被创建时data对象中已经存在的属性才是响应式的。所以在
一开始不会使用后面却要使用的属性,最好一开始就声明到data中,初始化
为空值即可。
2.使用Object.freeze(),会阻止修改现有属性,意味着响应系统无法再追踪
属性变化。

三、模板语法:

1.在模板数据绑定时可以用单个的JavaScript表达式
2.模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math
和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

四、计算属性和侦听器

1.计算属性:
将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实
是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计
算属性只有在它的相关依赖发生改变时才会重新求值。多次访问计算属性会
立即返回之前的计算结果,而不必再次执行函数。
而对于方法,每当触发重新渲染时,调用方法将总会再次执行函数。
2.侦听器:watch
当需要在数据变化时执行异步或开销较大的操作时使用。
五、条件渲染
1.v-if: 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2.v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
3.v-show: v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display
4.v-show: 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS 进行切换。
5.v-if与v-show对比:v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
6.v-if与v-for:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
7.v-if可以与计算属性和方法一起使用:但方法和计算属性名后不能有(),会报错。

六、列表渲染

1.v-for迭代数组:

item是迭代的元素,index是索引。可用 of 代替 in 。
2.v-for 循环对象:

value 是属性值,key 是属性名,index 是索引。
3.key: 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
注: 建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
5.数组更新检测:以下方法将会触发视图更新

注:由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:

当你修改数组的长度时,例如:

解决以上问题,使用Vue.set和splice方法。
7.对象更改检测注意事项:
由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除,对于已经创建的实例,Vue不能动态添加根级别的响应属性。最好一开始就声明在data中。但可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。即object只能是data对象下的属性对象。或者使用

为已有对象赋予多个新属性使用一下方法:

8.显示过滤/排序结果:
想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。

在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 可以使用一个method 方法:

注:感觉也可以使用过滤器 filter
9.一段取值范围的 v-for:
v-for 也可以取整数。在这种情况下,它将重复多次模板。

10.v-for on a template:
类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如:

11.v-for 与 v-if:
当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。
如果目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或template)上。如:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复