首页 > 语言 > JavaScript > 正文

Vue.js在使用中的一些注意知识点

2024-05-06 15:17:46
字体:
来源:转载
供稿:网友

本文介绍的Vue.js在使用中的一些注意知识点,对大家具有一定的参考价值,下面来看看详细的介绍吧。

每个 Vue 实例都会代理其 data 对象里所有的属性。 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 除了 data 属性,Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

模板语法

Vue.js 使用了基于HTML的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上, Vue 将模板编译成虚拟DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 Mustache里面只能是JS表达式,否则不会生效。 指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 过滤器设计目的就是用于文本转换,为了在其他指令中实现更复杂的数据变换,你应该使用计算属性。

计算属性

计算属性方法在组件 beforeMount 之后,Mounted 之前都会执行一遍。 计算属性方法可以没有返回值。但是该属性使用,即在模板中使用了,否则不起任何作用。 不经过计算属性,我们可以在method中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message没有发生改变,多次访问reversedMessage(computed内的一个方法)计算属性会立即返回之前的计算结果,而不必再次执行函数。 计算属性是依赖缓存的;而methods是没有缓存的,每次都执行一遍。 计算属性默认只有getter,不过在需要时你也可以提供一个 setter。参考官方实例:https://cn.vuejs.org/v2/guide/computed.html#计算-setter 当你想要在数据变化响应时,执行异步操作或开销较大的操作,water方法(或者 vm.$watch API)是很有用的。

条件渲染

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。 一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。 vue尝试尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。但是条件渲染的时候,有时需要重新渲染而不是服用已有元素,所以可以通过设置唯一的key来实现元素不复用。参考官方例子:https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选