vue3.0知识点分析

ref让数据变成响应式,即改变会引发视图层的变化
ref通过给value属性设置setter和getter实现数据劫持

1.ref推荐定义基本数据类型(ref值也可以是对象，但是一般情况下是对象直接使用reactive更合理)。
2.在 Vue 的模板中使用 ref 的值不需要通过 value 获取 （Vue 会通过自动给 ref 的值加上 .value）。
3.在 js 中使用 ref 的值必须使用 .value 获取。

//watchEffect是立即执行的，没有惰性。immediate
//watchEffect会自动检测内部的代码，不需要传递任何需要监听的内容
//watchEffect无法获取旧的值，只能获取最新的值

toRefs
将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类 型的响应式数据

这是其中一个页面案例，一共分析使用

<template>
  <div class="home-container page-container">
    <div class="page-title">首页{{ paramsNameId }}</div>
    <div>{{ type }}</div>
    <el-input v-model="type" placeholder="ceshihdifj " />
    <el-button type="primary" @click="getType()">{{count}}{{dataForm.name}}</el-button>
    <div>computed:{{countAddFive}}</div>
    <div>toRefs(解构赋值):{{name}}</div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  reactive,
  watch,
  computed,
  watchEffect,
  effect 
} from 'vue'

import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  name: 'Home',
  setup() {
    const route = useRoute()
    const router = useRouter()
    console.log(route, router, 'route,router123')
    // console.log(route.query.id,'route,router123');
    const type = ref('')
    const paramsNameId = route.query.id
    let count = ref(0)
    let count2 = ref('默认值测试')
    const dataForm = reactive({
      name:'cqq',
      age:18,
      sex:0
    })
    let msg=reactive({count})
    let ce:number = 0
    // 函数方法<-------------------------------------------->
    function getType() {
      dataForm.name = 'test'
      // ce = 1
      // count.value = 9
      // count2.value = '新值-hahha'
      // console.log(type.value, 'type',dataForm.name,ce)
      total.value =10
      count.value++
      console.log(msg.count,'77777777777'); //在reactive对象中,会被自动解套
      msg.count=88888888;
      console.log(msg.count,';;;;') //通过reactive对象调用属性赋值ref的形式,也会自动解套
    }
     // toRefs函数方法<-------------------------------------------->
    function useProduct(){
      return toRefs(dataForm)
    }
    // toRefs可以解构赋值<-------------------------------------------->
    const { name, age } = useProduct()
    console.log(name.value, age.value ,'name, age -toRefs可以解构赋值')
    // 计算属性
    let countAddFive = computed(() => {
          return count.value+5;
    });
    let total =  ref(9)
    // effect 计算属性<-------------------------------------------->
    effect(() => {
        // console.log(111)
      total.value = total.value * total.value
    })
    console.log(total.value,'total.value')
    // 监听多个属性<-------------------------------------------->
    watch([count, count2], ([newCount, newCount2], [oldCount, oldCount2]) => { 
        console.log(newCount, newCount2,'监听新值');
        console.log(oldCount, oldCount2,'监听老值')
    })
    // watchEffect<-------------------------------------------->
    const stopFun = watchEffect(() => {
      if(dataForm.name){
       console.log(dataForm.name,'hhhhhhhhhhhhh');
      }
      setTimeout(() => {
        stopFun();
      }, 5000)
    })
    // 单个监听<-------------------------------------------->
    // watch(() => type.value, (newValue, oldValue) => {
    //     // 因为watch被观察的对象只能是getter/effect函数、ref、热active对象或者这些类型是数组
    //     // 所以需要将type变成getter函数
    //     console.log(newValue, oldValue,'newValue, oldValue')
    // })
    // 生命周期<-------------------------------------------->
    onMounted(() => {
      console.log('出发了么',dataForm.name)
    })
    // 状态跟踪组件<-------------------------------------------->
    onRenderTracked((event) => {
      console.log('状态跟踪组件----------->')
      console.log(event)
    })
    //filters过滤器已从Vue 3.0中删除，不再支持。
    //watchEffect是立即执行的，没有惰性。immediate
    //watchEffect会自动检测内部的代码，不需要传递任何需要监听的内容
    //watchEffect无法获取旧的值，只能获取最新的值
    //toRefs
    //将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据
    return {
      paramsNameId,
      type,
      getType,
      dataForm,
      ce,
      count,
      countAddFive,
      name
    }
  }
})
</script>

<style scoped lang="stylus">
.home-container {
  .vue-element-plus-logo {
    width 50%
    height 100%
  }
}
</style>