vue3基础语法笔记

使用ref实现基础数据类型响应式

ref返回值：带value属性的对象，如果需要更改值，需要xx.value来修改

template中不需要写.value，会自动解析

<script>
import { ref } from "vue";
export default {
  setup() {
    // 使用ref实现简单数据类型响应式
    // msg
    let msg = ref("helloWorld");
    function changeMsg() {
      msg.value = "hello";
    }
    // counter
    let counter = ref(0);
    function changeCounter() {
      counter.value++;
    }
    return {
      msg,
      changeMsg,
      counter,
      changeCounter,
    };
  },

使用reactive实现复杂数据类型响应式

<script>
import { reactive } from "vue";
export default {
  setup() {
    // 使用reactive实现复杂数据类型响应式
    // obj
    let obj = reactive({
      name: "张三",
      age: 18,
    });
    function changeObjName() {
      obj.name = "李四";
    }
    // arr
    let arr = reactive([1, 2, 3, 4, 5]);
    function changeArr(){
      arr[0] = 999
    }
    return {
      obj,
      changeObjName,
      arr,
      changeArr
    };
  },
};
</script>

使用toRefs实现结构后数据重新获得响应式

使用es6解构得到的值会失去响应式，可以用toRefs来恢复响应式

<template>
  <div>
    {{ name }}
    <button @click="changeObj">修改name</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  setup() {
    let obj = reactive({
      name: "张三",
    });
    const changeObj = () => {
      obj.name = "李四四";
    };
    return {
      ...toRefs(obj),
      changeObj,
    };
  },
};
</script>

使用watch监听基本数据类型值改变

语法：watch(需要监听的值,回调函数)

回调函数两个参数，新值，旧值

<template>
  <div>
    {{ msg }}
    <button @click="changeMsg">改变msg，watch监听</button>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
export default {
  setup() {
    let msg = ref("helloWorld");
    watch(msg, (newValue, oldValue) => {
      console.log(newValue, oldValue);
    });
    const changeMsg = () => {
      msg.value = "hello";
    };
    return {
      msg,
      changeMsg
    };
  },
};
</script>

使用watchEffect监听复杂数据类型值改变

语法：watchEffect(回调函数)

当回调函数内发送引用关系，会自动监听引用的值变化(并且组件初始化会默认执行，等价于vue2中的 immediate:true)

<template>
  <div>
    {{ obj.name }}
    <button @click="changeObjName">修改obj.name</button>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { watchEffect } from "@vue/runtime-core";
export default {
  setup() {
    let obj = reactive({
      name: "张三",
      age: 18,
    });
    watchEffect(() => {
      console.log(obj.name);
    });
    const changeObjName = () => {
      obj.name = "李四";
    };
    return {
      obj,
      changeObjName
    };
  },
};
</script>

computed

语法：computed(回调函数)   默认执行getter

特性：依赖值没有发送改变，则不会执行。（缓存）

返回值：带有value属性的对象，如果需要操作则需要 返回值.value

template中不需要写.value，会自动解析

<template>
  <div>
    {{ msg }}
  </div>
  <div>
    {{ reverseMsg }}
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";

export default {
  setup() {
    let msg = ref("helloWorld");
    let reverseMsg = computed(() => msg.value.split("").reverse().join(""));
    return {
      msg,
      reverseMsg,
    };
  },
};
</script>