vue3-Composition-Api

Vue3 Composition Api

1. Composition API 是根据逻辑相关性组织代码,提高可读性和可维护性
2. 更好的重用逻辑代码
3. 在 Vue3 中 Composition API 是可选的

setup 函数

• 使用 Composition API 的入口
• 在 beforeCreate 之前调用
• this 在 setup() 中不可用

ref 函数

使用 import { ref } from 'vue'

• 创建并返回一个响应式且可改变的 ref 对象,对象拥有一个指向内部值的单一属性 .value
• 修改对象必须使用 XXX.value
• 在模板中使用 ref 创建的对象,必须在 setup 函数中放进一个对象中并返回

事件方法

• 在 setup 函数中定义方法
• 在模板中使用改方法,必须放进一个对象并返回

computed 计算属性

使用 import { computed } from 'vue'

• 在模板中使用必须在 setup 函数中放进一个对象中并返回
• 传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。

const count = ref(1);
const plusOne = computed(() => count.value + 1);
console.log(plusOne.value); // 2
plusOne.value++; // 错误！

• 或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。

setup(){
    const count = ref(1);
    const plusOne = computed({
        get: () => count.value + 1,
        set: (val) => {
            count.value = val - 1;
    });
plusOne.value = 1;
console.log(count.value);

}

响应式对象 reactive

使用 import {computed, reactive } from 'vue'

• 接收一个普通对象然后返回该普通对象的响应式代理
• 在模板中使用必须在 setup 函数中放进一个对象中并返回

setup(){
const data = reactive({
  name: "张三",
  age: 18,
  year: computed({
    get: () => {
      return 2020 - data.age;
    },
    set: (val) => {
      data.age = 2020 - val;
    },
  }),
});
return {data}
// 简写 return {...toRefs{data}}
}
// 在模板上使用data中的数据必须是data.的格式,
//简化模板书写格式可以做引入toRefs
//toRefs:把一个响应式对象转换成普通对象，但对象内的属性都是响应式的

setup 的参数 props ,context

• 获取组件中的 props
• 第一个参数 props 对象是响应式的，watchEffect 或 watch 会观察和响应 props 的更新：
• 第二个参数提供了一个上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property。

  props: {
    name: String,
  },
  setup(props,context) {
    watch(
        ()=> props.title,(newval,oldval)=>{
            console.log(newval,oldval)
            context.emit("title-changed")
        }
    )
  },
}

watchEffect

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

const count = ref(0);

watchEffect(() => console.log(count.value));
// -> 打印出 0

setTimeout(() => {
  count.value++;
  // -> 打印出 1
}, 100);

• 停止更新
• 当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，
• 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
• 在一些情况下，也可以显式调用返回值以停止侦听

const stop = watchEffect(() => {
  /* ... */
});

// 之后
stop();

赏

感谢观看