1、响应式属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性。

    var data = { a: 1 }
    var vm = new Vue({
          data: data
    })

    vm.a === data.a // -> true

    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

即:都可以使vm.xxx这种方式获取和修改实例属性。

注意:

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。

那么这种情况的话,可以使用VueJs的vm.$xxx的方式来修改实例属性,这同样会触发视图更新,响应式的改变。

2、生命周期钩子

生命周期钩子包括createdbeforeCompilecompiledreadybeforeDestroydestroyed

钩子的 this 指向调用它的 Vue 实例

我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念,组件的自定义逻辑可以分割在这些钩子里面。

3、插值

单词插值,只有在第一次渲染时候渲染值,之后不会随实例属性值的变化而改变,如:

    <span>单词插值: {{* msg }}</span>

插入原始HTML,这种方式内容以 HTML 字符串插入,数据绑定将被忽略,如:

    <div>{{{ raw_html }}}</div>

如果需要复用模板片断,应当使用 partials

注意:

在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。记住,只对可信内容使用 HTML 插值,永不用于用户提交的内容。

4、v-show 和 v-if的选择

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。

5、使用track-by,优化列表循环

因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用 track-by 特性给 Vue.js 一个提示,Vue.js 因而能尽可能地复用已有实例。

例如,假定数据为:

{
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}

然后可以这样给出提示:

<div v-for="item in items" track-by="_uid">
  <!-- content -->
</div>

然后在替换数组 items 时,如果 Vue.js 遇到一个包含 _uid: ‘88f869d’ 的新对象,它知道它可以复用这个已有对象的作用域与 DOM 元素。

6、prop数据绑定)=

prop 默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

解决办法 : 使用 .sync.once 绑定修饰符显式地强制双向或单次绑定

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>
7、组件的父链

子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children,包含它所有的子元素。

Logo

前往低代码交流专区

更多推荐