Vue3新特性组合式Api

桃扇骨 2022-12-15 03:41 180阅读 0赞

### setup - 组件内使用 Composition API 的入口点 ###

> setup 作为组合式 API 的入口点，也就是说，组合式 API 都必须只能在 setup 中使用

<template>
      <div>
        <h1>setup - 组件内使用 Composition API 的入口点</h1>
        <p>{ { username}}</p>
      </div>
    </template>
    
    <script>
    export default { 
      name: "Setup",
      props: { 
        username: {  type: String, default: "guao" },
      },
      //setup 先与 beforeCreate。
      setup(props, ctx) { 
        console.log("setup");
        console.log(props, ctx);
        //props里面使用 父组件传来的props
        console.log(props.username, ctx);
        //由于 setup 里面不能使用 this，
        //所以不能像 vue2.x 一样使用 this.$emit(‘emitFun’, val)，
        //setup 里面有两个参数，第二个参数可以进行结构得到 emit，
        //也可以直接直接使用 context.emit 进行 emit 事件
        context.emit('emitFun', { emit: true})
      },
      beforeCreate() { 
        console.log("beforeCreate");
      },
    };
    </script>

> 创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用。

### reactive, ref - 数据响应式 ###

> reactive - 对象数据响应式  
> 接收一个普通对象然后返回该普通对象的响应式代理。

<template>
      <div>
        <p>{ { data.msg}}</p>
        <button @click="updateData">更新数据</button>
      </div>
    </template>
    
    <script>
    import {  reactive } from "vue";
    
    export default { 
      name: "ReactiveObject",
      setup() { 
        const data = reactive({  msg: "hello world" });
        const updateData = () => { 
          data.msg= "hello world " + new Date().getTime();
        };
        return {  data, updateData };
      },
    };
    </script>

> ref - 单值数据响应式  
> 接受一个参数值并返回一个响应式且可改变的 ref 对象。

<template>
      <div>
        <h1>单值数据响应式</h1>
        <p>{ { msg}}</p>
        <button @click="updateMessage">更新数据</button>
      </div>
    </template>
    
    <script>
    import {  ref } from "vue";
    
    export default { 
      name: "ReactiveSingleValue",
      setup() { 
        const msg= ref("hello world");
        const updateMessage = () => { 
          msg.value = "hello world " + new Date().getTime();
        };
        return {  msg, updateMessage };
      },
    };
    </script>

### computed - 计算属性 ###

> 只传 getter  
> 返回一个默认不可手动修改的 ref 对象。

<template>
      <div>
        <h1>computed - 计算属性</h1>
        <p>{ { username}}</p>
      </div>
    </template>
    
    <script>
    import {  reactive, computed } from "vue";
    export default { 
      name: "Computed",
      setup() { 
        const user = reactive({  firstname: "chen", lastname: "haihong" });
        const username = computed(() => user.firstname + " " + user.lastname);
        username.value = "hello world"; // 报警告，computed value is readonly
        return {  username };
      },
    };
    </script>

> 同时传 getter、setter  
> 创建一个可手动修改的计算状态。

<template>
      <div>
        <h1>computed - 计算属性</h1>
        <p>firstname: <input v-model="user.firstname" /></p>
        <p>lastname: <input v-model="user.lastname" /></p>
        <p>username: <input v-model="username" /></p>
      </div>
    </template>
    
    <script>
    import {  reactive, computed } from "vue";
    export default { 
      name: "Computed2",
      setup() { 
        const user = reactive({  firstname: "Chen", lastname: "Haihong" });
        const username = computed({ 
          get: () => user.firstname + " " + user.lastname,
          set: (value) => { 
            const [firstname, lastname] = value.trim().split(" ");
            user.firstname = firstname;
            user.lastname = lastname;
          },
        });
        return {  user, username };
      },
    };
    </script>

### watchEffect、watch - 侦听器 ###

> watchEffect  
> 立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<template>
      <div>
        <h1>watchEffect - 侦听器</h1>
        <p>{ { data.count}}</p>
      </div>
    </template>
    
    <script>
    import {  reactive, watchEffect } from "vue";
    export default { 
      name: "WatchEffect",
      setup() { 
        const data = reactive({  count: 1 });
        watchEffect(() => console.log(`侦听器：${ data.count}`));
        setInterval(() => { 
          data.count++;
        }, 1000);
        return {  data, stop };
      },
    };
    </script>

> watch  
> 对比watchEffect，watch允许我们：  
> • 懒执行副作用，也就是说仅在侦听的源变更时才执行回调；  
> • 更明确哪些状态的改变会触发侦听器重新运行副作用；  
> • 访问侦听状态变化前后的值。

<template>
      <div>
        <h1>watch - 侦听器</h1>
        <p>count1: { { data.count1}}</p>
        <p>count2: { { data.count2}}</p>
        <button @click="stopAll">Stop All</button>
      </div>
    </template>
    
    <script>
    import {  reactive, watch } from "vue";
    export default { 
      name: "Watch",
      setup() { 
        const data = reactive({  count1: 0, count2: 0 });
        // 侦听单个数据源
        const stop1 = watch(data, () =>
          console.log("watch1", data.count1, data.count2)
        );
        // 侦听多个数据源
        const stop2 = watch([data], () => { 
          console.log("watch2", data.count1, data.count2);
        });
        setInterval(() => { 
          data.count1++;
        }, 1000);
        return { 
          data,
          stopAll: () => { 
            stop1();
            stop2();
          },
        };
      },
    };
    </script>

### readonly - “深层”的只读代理 ###

> 传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理。一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的。

<template>
      <div>
        <h1>readonly - “深层”的只读代理</h1>
        <p>original.count: { { original.count}}</p>
        <p>copy.count: { { copy.count}}</p>
      </div>
    </template>
    
    <script>
    import {  reactive, readonly } from "vue";
    
    export default { 
      name: "Readonly",
      setup() { 
        const original = reactive({  count: 0 });
        const copy = readonly(original);
    
        setInterval(() => { 
          original.count++;
          copy.count++; // 报警告，Set operation on key "count" failed: target is readonly. Proxy {count: 1}
        }, 1000);
    
    
        return {  original, copy };
      },
    };
    </script>

### toRef - 为 reactive 对象的属性创建一个 ref ###

> toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。

setup() { 
      const user = reactive({  age: 1 });
      const age = toRef(user, "age");
    
      age.value++;
      console.log(user.age); // 2
    
      user.age++;
      console.log(age.value); // 3
    }

> 当您要将一个 prop 中的属性作为 ref 传给组合逻辑函数时，toRef 就派上了用场：

export default { 
      setup(props) { 
        useSomeFeature(toRef(props, 'foo'))
      },
    }

### toRefs - 解构响应式对象数据 ###

> 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

<template>
      <div>
        <h1>解构响应式对象数据</h1>
        <p>Username: { { username}}</p>
        <p>Age: { { age}}</p>
      </div>
    </template>
    
    <script>
    import {  reactive, toRefs } from "vue";
    
    export default { 
      name: "DestructReactiveObject",
      setup() { 
        const user = reactive({ 
          username: "haihong",
          age: 10000,
        });
    
        return {  ...toRefs(user) };
      },
    };
    </script>

### isRef、isProxy、isReactive、isReadonly ###

> 检查一个值/对象是否为一个 ref / proxy / reactive / readonly 对象。