likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 11

生命周期

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 返回出来

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

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

vs methods方法

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

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

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

watch监听器

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

// watch内的方法会在数据变化时，触发执行

// 1、简单写法 → 监听简单数据类型
watch: {
     数据属性名(newVal, oldVal) {
         // newVal 变化后的新值， oldVal 变化前的旧值
         // 可以根据这两字段做 业务逻辑 或 异步操作
     },
     '对象.属性名'(newVal, oldVal) {
         // 逻辑处理
     }
}

// 2、完整写法 → 添加配置项
watch: {
    数据属性名: {
        deep: true, // true 表示对复杂类型深度监视
        immediate: true, // true 表示初始化立刻执行一次 handler 方法
        handler (newVal, oldVal) {
            // 逻辑处理
        }
    }
}
转载自:https://juejin.cn/post/7276026646255534115
评论
请登录