【Vue】Vue2.0+Vue3.0学习笔记day14（Vue3）

目录

150.computed计算属性

151.watch监视ref定义的数据

152.watch监视reactive定义的数据

153.watch时value的问题

154.watchEffect函数

155.Vue3生命周期

156.自定义hook

157.toRef与toRefs

158.shallowReactive与shallowRef

---

150.computed计算属性

• 与Vue2.x中computed配置功能一致

• 写法

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName">
  <br>
  名：<input type="text" v-model="person.lastName">
  <br>
  <span>全名：{
  {person.fullName}}</span>
  <br>
  全名：<input type="text" v-model="person.fullName">
</template>

<script>
import { reactive } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'

export default {
  name: 'Demo',
  setup(){
    // 数据
    let person = reactive({
      firstName:'张',
      lastName:'三'
    })

    // 计算属性--简写(没有考虑计算属性被修改的情况)
    /* person.fullName = computed(()=>{
      return person.firstName + '-' + person.lastName
    }) */
    // 计算属性--完整写法(考虑读和写)
    person.fullName = computed({
      get(){
        return person.firstName + '-' + person.lastName
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

    // 返回一个对象（常用）
    return{
      person,
    }

  }
}
</script>

151.watch监视ref定义的数据

• 与Vue2.x中watch配置功能一致

• 两个小“坑”：

  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

<template>
  <h2>当前求和为：{
  {sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为: {
  {msg}}</h2>
  <button @click="msg+='!'">修改信息</button>
</template>

<script>
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

export default {
  name: 'Demo',
  setup(){
    // 数据
    let sum =ref(0)
    let msg =ref('你好啊')

    // 情况一：监视ref所定义的一个响应式数据
   /*  watch(sum,(newvalue,oldvalue)=>{
      console.log('sum变了',newvalue,oldvalue);
    }{immediate:true}) */
    // 情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newvalue,oldvalue)=>{
      console.log('sum或msg变了',newvalue,oldvalue);
    },{immediate:true})

    // 返回一个对象（常用）
    return{
      sum,
      msg
    }

  }
}
</script>

152.watch监视reactive定义的数据

<template>
  <h2>当前求和为：{
  {sum}}</h2>