Vue动态改变数据

方式一：reactive

注意点

• reactive参数必须是对象

使用方式

import { reactive} from "vue";
export default {
    setup() {
        const obj = reactive({
          name: "张三",
        });
        return obj;
    },
    methods: {
    updataName() {
      console.log("方法进来啦！");
      this.name = "李四";
    },
  },
}

补充

toRefs可以让reactive创建的响应式数据对象，支持es6的解构赋值，同时保持响应式的特性。

作用:让reactvie方法创建的响应式数据对象,支持ES6的解构赋值操作( reactive创建的响应式数据对象默认不支持ES6解构赋值,因为会使其失去响应式)

import { toRefs } from "vue";
setup() {
    const { name, age } = toRefs(
      reactive({
        name: "张三",
        age: 16,
      })
    );
    return { name, age };
  }

方式二：ref

作用

基于基本数据类型(字符串,布尔,数值)创建一个响应式的数据对象

使用方式

import { ref } from "vue";
export default {
    setup() {
        // 通过ref
        const name = ref("张三");
        name.value = "李四";
        console.log(name.value);
        return {
          name,
        };
      },
    methods: {
        updataName() {
          this.name = "宇智波带土";
        },
  }
}