2017最新网站设计风格,什么网站可以发布信息,建筑人才网招聘网前程无忧,沅江市建设局网站文章目录 一、计算属性与监视1、computed函数2、watch函数3、watchEffect函数 二、生命周期1、与 2.x 版本生命周期相对应的组合式 API2、新增的钩子函数3、代码实例 一、计算属性与监视
1、computed函数
与computed配置功能一致只有getter有getter和setter
2、watch函数
与… 文章目录 一、计算属性与监视1、computed函数2、watch函数3、watchEffect函数 二、生命周期1、与 2.x 版本生命周期相对应的组合式 API2、新增的钩子函数3、代码实例 一、计算属性与监视
1、computed函数
与computed配置功能一致只有getter有getter和setter
2、watch函数
与watch配置功能一致监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次通过配置deep为true, 来指定深度监视
3、watchEffect函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据默认初始时就会执行第一次, 从而可以收集需要监视的数据监视数据发生变化时回调
二、生命周期
1、与 2.x 版本生命周期相对应的组合式 API
beforeCreate - 使用 setup()created - 使用 setup()beforeMount - onBeforeMountmounted - onMountedbeforeUpdate - onBeforeUpdateupdated - onUpdatedbeforeDestroy - onBeforeUnmountdestroyed - onUnmountederrorCaptured - onErrorCaptured
2、新增的钩子函数
组合式 API 还提供了以下调试钩子函数
onRenderTracked 注册一个调试钩子当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用且在服务器端渲染期间不会被调用。 onRenderTriggered 注册一个调试钩子当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用且在服务器端渲染期间不会被调用。
3、代码实例
template
div classabouth2msg: {{msg}}/h2hrbutton clickupdate更新/button
/div
/templatescript langts
import {ref,onMounted,onUpdated,onUnmounted, onBeforeMount, onBeforeUpdate,onBeforeUnmount
} from vueexport default {beforeCreate () {console.log(beforeCreate())},created () {console.log(created)},beforeMount () {console.log(beforeMount)},mounted () {console.log(mounted)},beforeUpdate () {console.log(beforeUpdate)},updated () {console.log(updated)},beforeUnmount () {console.log(beforeUnmount)},unmounted () {console.log(unmounted)},setup() {const msg ref(abc)const update () {msg.value --}onBeforeMount(() {console.log(--onBeforeMount)})onMounted(() {console.log(--onMounted)})onBeforeUpdate(() {console.log(--onBeforeUpdate)})onUpdated(() {console.log(--onUpdated)})onBeforeUnmount(() {console.log(--onBeforeUnmount)})onUnmounted(() {console.log(--onUnmounted)})return {msg,update}}
}
/script
