Vue常用属性

目录

1、计算属性 - computed

2、监听器 - watch

3、综合案例：完善购物车

4、自定义指令 - directive

5、过滤器 - filter

6、混入 - mixin

7、生命周期

8、虚拟DOM与diff算法

9、双向数据绑定原理

---

1、计算属性 - computed

模板中放入太多的逻辑（方法）会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中，通过关键词computed属性对象中定义一个个函数，并返回一个值，使用计算属性时和data中的数据使用方式一致。

核心点：

• 计算属性其在代码的表现也是方法，但是与methods不同

  • 计算属性必须有return

• 在某些场景下，计算属性的效率要比methods效率高

  • 计算属性支持数据的缓存操作（在依赖数据不变的情况下），而methods不行

示例

<div id="app">
    <!-- 当多次调用 cfn计算属性时只要里面的 num值不改变,它会把第一次计算的结果直接返回直到data中的num值改变 计算属性才会重新发生计算 -->
    <div>{
 { cfn }}</div>
    <div>{
 { cfn }}</div>
    <!-- 调用methods中的方