vue3笔记

1. ref

   • 定义一个响应数据

     • 示例

       <template>
       	<p>
               {{count}}
           </p>
       	<input type="button" value="clickMe" @click='change'>
       </template>
       <script lang='ts'>
           import {defineComponent, ref} from 'vue';
           export default defineComponent({
               name: 'App',
               setup() { // 组合函数
                   const count = ref(1);
                   // 可以看出 count 中的value属性的值是其真值
                   console.dir(count);
                   const change = () => {
                       // js 内访问需要 xxx.value 的形式
                       // 模板中不需要 .value
                       count.value += 1;
                   }
                   return {count, change};
               }
           });
       </script>
       

   • 获取元素

     • 示例

       <template>
         <div>Hello Vue!</div>
         <input type="text" ref="inputRef">
       </template>
       
       <script lang="ts">
       import { defineComponent, ref, onMounted } from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           // 获取元素本身，通过 value 获取属性
           // 添加泛型，可以进行代码提示
           const inputRef = ref<HTMLElement|null>(null);
           // onMounted 生命周期函数
           onMounted(() => {
             console.dir(inputRef)
             if (inputRef.value) {
               inputRef.value.style.color = '#282727';
               inputRef.value.style.border = '0';
               inputRef.value.style.borderBottom = '1px solid red'
               inputRef.value.style.outline = 'none';
               inputRef.value.focus();
             }
           });
           return {
             inputRef
           };
         }
       });
       </script>
       

2. reactive

   • 将一个普通对象转换为一个响应数据

   • 转换是深层次，即影响对象内部的每个属性

   • ES6 的Proxy实现

   • 示例

     <template>
       <div>Hello Vue!</div>
       <!--通过对象的方式访问-->
       <p>name: {{ person.name }}</p>
       <p>age: {{ person.age }}</p>
       <input type="button" value="clickMe" @click="update">
     </template>
     
     <script lang="ts">
     import {defineComponent, reactive} from "vue"
     
     export default defineComponent({
       name: 'App',
       setup() {
         const person = reactive({name: 'tom', age: 18});
         // 与 ref 不同，不需要 value
         console.dir(person)
         const update = () => {
           person.name += '1';
           person.age += 1;
         };
         return {
           person,
           update
         };
       }
     });
     </script>
     

3. toRefs

   • reactive 对象取出的所有属性都是非响应的，通过 toRefs 解决

     • 示例

       <template>
         <div>Hello Vue!</div>
         <!--通过对象的方式访问-->
         <p>name: {{ person.name }}</p>
         <p>age: {{ person.age }}</p>
         <input type="button" value="clickMe" @click="update" />
       </template>
       
       <script lang="ts">
       import { defineComponent, reactive, toRefs } from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           const person = reactive({ name: "tom", age: 18 });
           console.dir(person);
           // 非响应式数据
           console.dir(person.name);
           const p = toRefs(person);
           // 响应式数据
           console.dir(p.name)
           const update = () => {
             person.name += "1";
             person.age += 1;
           };
           return {
             person,
             update
           };
         }
       });
       </script>
       

   • 使用 reactive 需要通过对象名的方式访问，通过 toRefs 可以直接属性名的方式访问

     • 示例

       <template>
         <div>Hello Vue!</div>
         // 直接属性名访问，且是响应数据
         <p>name: {{ name }}</p>
         <p>age: {{ age }}</p>
         <input type="button" value="clickMe" @click="update" />
       </template>
       
       <script lang="ts">
       import { defineComponent, reactive, toRefs } from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           const person = reactive({ name: "tom", age: 18 });
           // 将原始属性转为响应式的 ref 属性
           const p = toRefs(person);
           // 响应式数据
           console.dir(p.name)
           const update = () => {
             person.name += "1";
             person.age += 1;
           };
           return {
             // 解构
             ...p,
             update
           };
         }
       });
       

     • 补充

       // 解构，即将每个属性提取出来
       let person = {name: 'tom', age: 18};
       let p = {score: 90, person};
       let p1 = {score: 90, ...person}
       console.log(p); // {score: 90, {name: 'tom', age: 18}}
       console.log(p1); // {score: 90, name: "tom", age: 18}
       

4. 计算属性与监视

   • computed 函数

     • 示例

       <template>
         <div>Hello Vue!</div>
         <label>
           姓：<input type="text" v-model="firstName"><br>
         </label>
         <label>
           名：<input type="text" v-model="lastName"><br>
         </label>
         <label>
           姓名：<input type="text" v-model="fullName"><br>
         </label>
       </template>
       
       <script lang="ts">
       import {defineComponent, computed, reactive, toRefs} from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           const name = reactive({
             firstName: '',
             lastName: ''
           });
           const fullName = computed({
             get() {
               return (name.firstName + " " + name.lastName).trim();
             },
             set(val: string) {
               const [v1, v2] = val.trim().split(' ');
               name.firstName = v1 || ' ';
               name.lastName = v2 || '';
             }
           });
           return {
             ...toRefs(name),
             fullName
           };
         }
       });
       </script>
       

   • watch

     • 示例

       <template>
         <div>Hello Vue!</div>
         <label>
           姓：<input type="text" v-model="firstName"><br>
         </label>
         <label>
           名：<input type="text" v-model="lastName"><br>
         </label>
         <label>
           姓名：<input type="text" v-model="fullName"><br>
         </label>
       </template>
       
       <script lang="ts">
       import {defineComponent, reactive, ref, toRefs, watch} from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           const name = reactive({
             firstName: 'a',
             lastName: 'b'
           });
           const fullName = ref('');
           // 通过数据来指定监测多个数据
           // 如果是 ref 对象，直接指定
           // 如果是 reactive 对象，则需要通过函数指定
           watch([() => name.firstName, () => name.lastName], (value: Array<string>) => {
             console.dir(value);
             fullName.value = value[0] + ' ' + value[1];
           }, {immediate: true, deep: true}); // immediate 初始化时是否执行，deep 表示深度监测
           watch(fullName, (value: string) => {
             const [v1, v2] = value.split(' ');
             name.firstName = v1;
             name.lastName = v2 || '';
           });
           return {
             ...toRefs(name),
             fullName
           };
         }
       });
       </script>
       

   • watchEffect

     • 示例

       <template>
         <div>Hello Vue!</div>
         <label>
           姓：<input type="text" v-model="firstName"><br>
         </label>
         <label>
           名：<input type="text" v-model="lastName"><br>
         </label>
         <label>
           姓名：<input type="text" v-model="fullName"><br>
         </label>
       </template>
       
       <script lang="ts">
       import {defineComponent, reactive, ref, toRefs, watchEffect} from "vue";
       
       export default defineComponent({
         name: "App",
         setup() {
           const name = reactive({
             firstName: 'a',
             lastName: 'b'
           });
           const fullName = ref('');
           // 监视所有相应数据，默认初始时执行一次
           watchEffect(() => {
             fullName.value = name.firstName + ' ' + name.lastName;
           });
           watchEffect(() => {
             const [v1, v2] = fullName.value.split(' ');
             name.firstName = v1.trim();
             name.lastName = v2 || '';
           });
           return {
             ...toRefs(name),
             fullName
           };
         }
       });
       </script>