vue3.0提前了解系列----composition生命周期、计算属性、watch属性的使用

Z时代
2024-01-10
分类：综合

vue

今天给大家带来的的内容是compotion内的生命周期、计算属性、watch的使用

vue3中生命周期在composition api中有一些小的改动

写法为

import { onMounted } from 'vue'
setup () {
     console.log('内部的created')
     onMounted(() => {
     console.log('内部mounted')
  })
}

vue3中基本有大部分的周期，去掉了beforeCreate和created，不过我们可以在setup中直接写一些代码，这些代码相当于是created执行，我专门尝试了一下，composition api的周期和optionsAPI是不冲突的，会在options同周期之后执行

可以用下面代码进行测试

import { onMounted } from 'vue'

export default {

mounted(){

console.log('外部的mounted')

setup () {

console.log('内部的created')

onMounted(() => {

console.log('内部mounted')

})

}

vue3对应vue2的周期为（compositionapi的周期都需要引入！！！）：

beforeCreate -> 使用setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

activated -> onActivated

deactivated -> onDeactivated

好了，周期告一段落，基本常用的也就这几个，有以下几个周期发生变化：

1、beforeDestroy、destroyed 被替换为了onBeforeUnmount、onUnmounted

2、去掉了beforeCreate、created请直接使用setup

3、新增了onRenderTracked、onRenderTriggered（两个钩子都收到DebuggerEvent类似于onTrack和onTrigger观察者的选项）

计算属性和watch

上完整代码：

 import { reactive, watch, toRefs, computed,watchEffect } from 'vue'
  export default {
    setup () {
      const state = reactive({
        count: 0,
        doubleCount: computed(() => {
          return state.count * 2
        }),
        a: 1,
        watchCount: 0,
        watchCount1: 1
      })
      watchEffect(() => {
        console.log('watchEffect', state.count, state.a)
      }, {
        onTrack() {
          console.log('onTrack调用')   // 当反应性属性或ref作为依赖项被跟踪时
        },
        onTrigger() {
          console.log('ontrigger调用') // 当观察程序回调由依赖项的变异触发时
        }
      })
      watch(() => {
        return [state.watchCount, state.watchCount1]
      }, (val, prev) => {
        console.log(val, prev)
      })
      setTimeout(() => {
        state.watchCount++
      }, 1000)
      const addRef = () => {
        state.count++
      }
      return {
        // 将代理对象转换为纯对象。并对其每个key做包装，包装为ref
        ...toRefs(state),
        addRef,
      }
    }
  }

watchAPI与2.x this.$watch（以及相应的watch选项）完全等效。watch需要查看特定的数据源，并在单独的回调函数中应用副作用。默认情况下，它也是惰性的-即仅在监视的源已更改时才调用回调。

与相比watchEffect，watch可以让我们：

懒惰地执行副作用；

更具体地说明应触发观察程序重新运行的状态；

访问监视状态的先前值和当前值。

watchEffect是可以暂停的，可以将他赋值给一个变量，并且调用，如下：

const stop = watchEffect(() => {
  /* ... */
})
// later
stop()

两者区别我个人觉得是如下几点：

1、watchEffect 可以手动停止，而非一定要结束之后在停止

2、watch是惰性执行，watchEffect默认会执行一次（watch当然也可以，但是需要像2.x一样配置）

3、watch只可以监听他数组中的变量，而不能监听其余的变化（经测试，我发现如果在第一个参数内写一些操作也是可以监听到内部使用的变量，不过这样已经违反了vue3.x的这个参数的意义，肯定是不建议的）

4、参数不一样（watch(source,callback,options),warchEffect(effect,options)）

5、watch可以和以前一样监听值变化的先后变化（也有一些小变化，因为3.x支持多个值监听，所以newvalue和oldvalue都是一个数组）

emmmm....大概就这么多不同吧，接下来就composition应该是还有两篇文章，我是这么打算的下一章给大家说一下其余的一些普通用法和api的使用，下下篇给大家说一些高级用法和api的使用。感谢大家支持，我会尽可能的搞全一些，所以篇章比较多，希望大家都能尽快上手。

以上是 vue3.0提前了解系列----composition生命周期、计算属性、watch属性的使用的全部内容，来源链接： utcz.com/z/378236.html

vue3.0提前了解系列----composition生命周期、计算属性、watch属性的使用

计算属性和watch

其他人也看了：