vue3基础2

toRef 与 toRefs

import {reactive} from 'vue'
export default {
    setup(){
        const obj = reactive({
            name:'zhangsan',
            age:20
        })
        
        return {
            obj,
            name:obj.name      
        }
    }
}

如上，我们定义了一个响应式对象 obj，并将obj.name给到变量name，在使用时可以直接访问到obj.name，但这样name无法做到响应式，即使用v-model指令绑定name时，无法实现双向数据绑定，使用toRef或toRefs可以实现响应。

toRe接收两个参数，第一个参数为目标对象，第二个参数为值为字符串类型的key，toRefs则直接接收一个目标对象作为参数。

import {reactive,toRef,toRefs} from 'vue'
export default {
    setup(){
        const obj = reactive({
            name:'zhangsan',
            age:20
        })
        
        return {
            obj,
            // name:toRef(obj,'name'),
            ...toRefs(obj)
        }
    }
}

shallowReactive

使用shallowReactive创建的响应式对象不执行嵌套对象的深层响应式转换，如下，obj.name和obj.age都是响应式的，而obj.stu.no不是响应式的，当改变obj.stu.no的value时，页面中使用obj.stu.no的部分并不会重新渲染。

import {shallowReactive} from 'vue'
export default {
    setup(){
        let obj = shallowReactive({
          name:'zhangsan',
          age:18,
          stu:{
            no:9527
          }
        })
        
        return {
            obj
        }
    }
}

在 setup 中使用生命周期函数

在setup中可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

执行顺序setup > onBeforeCreate > created > onBeforeMount > onMounted。

在Vue3中，beforeUnmount 替代了 beforeDestroy，unmounted 替代了destroyed。

import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
    setup(){
        console.log('setup');
        // dom挂载之前
        onBeforeMount(()=>{
          console.log('onBeforeMount');
        })
        // dom挂载之后
        onMounted(()=>{
          console.log('onMounted');
        })
        // setup 中return 的数据更新之前
        onBeforeUpdate(()=>{
          console.log('onBeforeUpdate');
        })
        // setup 中return 的数据更新之后
        onUpdated(()=>{
          console.log('onUpdated');
        })
        // 组件卸载之前
        onBeforeUnmount(()=>{
          console.log('onBeforeUnmount');
        })
        // 组件卸载之后
        onUnmounted(()=>{
          console.log('onUnmounted');
        })
    }
}

setup 语法糖

在setup中定义的变量与函数都需要return才能在页面中使用，当代码体量越来越大时，有时难免忘记在return中注册。Vue3提供了setup语法糖，在script开始标签中添加setup属性，之后定义的变量与函数，无需return就可以在页面中使用。

<template>
  <h1>CompC</h1>
  <p>
    姓名：<input type="text" v-model="obj.name" /> 年龄：<input
      type="text"
      v-model="obj.age"
    />
  </p>
  <button @click="add">添加</button>
  <table border="1">
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr v-for="(v, i) in list" :key="i">
      <td>{{ i + 1 }}</td>
      <td>{{ v.name }}</td>
      <td>{{ v.age }}</td>
      <td><button @click="shanchu(i)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
import { reactive } from "vue";

let list = reactive([
  { name: "zhangsan", age: "20" },
  { name: "lisi", age: "26" },
  { name: "wangwu", age: "24" },
]);
let obj = reactive({
  name: "",
  age: "",
});
const add = () => {
  // 深拷贝
  list.push(JSON.parse(JSON.stringify(obj)));
  // 深拷贝的第二种方式
  // list.push({...obj});
  // 添加之后置空
  // obj.name = ''
  // obj.age = ''
  for(const key in obj){
      obj[key] = ''
  }
};
const shanchu = (i) => {
  list.splice(i, 1);
};