Vue生命周期+计算属性+监听器

生命周期

Vue生命周期：一个Vue实例从 创建 到 销毁 的过程。

生命周期的四个阶段 ：创建、 挂载、 更新、 销毁

生命周期钩子函数：

创建阶段：响应式数据......
- beforeCreate ：在实例初始化之后，数据观测（data observer）和 event / watch 时间配置之前被调用。
此时组件的选项还未挂载，因此无法访问 methods、data、computed上的方法和数据
- created ：实例创建完成后调用。此阶段实例已完成以下配置：数据观测（data observer）、属性和方法的运算、 watch / event 事件回调。但是，挂载还未开始，$el 属性目前不可见。
通常我们可以在这里对实例进行预处理。也有一些同学喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。

因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个页面发请求。建议在组件路由勾子beforeRouteEnter中来完成。
挂载阶段：渲染模板
- beforeMount：在挂载开始之前被调用（模板渲染到显示页面之前）
- mounted ：在模板渲染到页面之后。（el替换，并挂载到实例上之后被调用。）
beforeRouteEnter 的 next 的钩子比 mounted 触发靠后，指令的生效在 mounted 周期之前
更新阶段：修改数据，更新视图
- beforeUpdate ：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步的更改状态。这不会触发附加的重渲染过程。
当执行该钩子函数时，页面中显示的数据还是旧的，此时data的数据是最新的，页面尚未和最新数据保持同步
- updated ：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。在这个钩子被调用时，组件 DOM 已经更新。
避免在此过程中更改状态，否则可能会导致无限循环。
销毁阶段：销毁实例
- beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
以使用 this 来获取实该过程还可例。一般在这一步做一些重置的操作，比如清除组件中的定时器 和 监听的 DOM 事件。
- destroyed ：vue实例销毁后调用。调用后，vue实例指示的所有东西都会解绑，所有的事件监听都会被移除，所有的子实例也会被销毁
其他钩子函数
- activated：被包裹组件被激活时调用
- deactivated：被包裹组件停止使用时调用
- errorCaptured：错误捕获，接收参数：错误对象，发生错误的组件实例，一个包含错误来源信息的字符串
- serverPrefetch：服务器渲染中做数据预取的方式

（重点）子组件的生命周期： 其中vm代表父组件，child代表子组件

vm.created → vm.beforeMount → child.created → child.beforeMount → child.mounted → vm.mounted

`methods`方法

作用：给实例提供一个方法，调用以处理业务逻辑。

语法：

1、声明在 methods 配置项中。

2、需要时调用 → this.方法名() / {{ 方法名() }} / @事件名="方法名"

计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

1、声明在 computed 配置项中，一个计算属性对应一个函数。

2、使用起来，和普通属性一样 → {{ 计算属性名 }}

计算属性 → 对一段求值的代码进行封装，然后 return 返回出来

javascript 复制代码

// 1、简写（常用写法）
computed: {
    计算属性名 () {
        // 基于现有数据，编写求值逻辑
        return 结果
    }
}

// 2、完整写法
computed: {
    计算属性名: {
        get() {
         // 计算逻辑
         
         return 结果
        },
        set(修改的值) {
          // 修改逻辑
        }
    }
}

vs methods方法

computed 具有缓存特性，能提升性能。

计算属性会对计算出来的结果缓存，再次使用时，直接读取缓存。

只有当依赖项变化了，才会自动重新计算 → 并再次缓存

`watch`监听器

作用：监听数据变化，执行一些业务逻辑或异步操作语法：