ref 和 reactive

安装 vscode 插件【volar-海贼王图标就是了】

禁用-VSode 插件【Vetur】

之前的写法

// src/App.vue
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
    };
  },
};
</script>

第一种写法 ref

官网说：这种是用来存普通类型数据【存：字符串、数字那些】

定义数据

// src/App.vue
<template>
  <div>{{ msg }}</div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const msg = ref("hello world");
    return {
      msg,
    };
  },
};
</script>

获取数据 value

setup() {
    const msg = ref("hello world");
    console.log(msg.value) //获取数据
    return {
        msg,
    };
};

第二种写法 reactive

官网说：这种是用来存引用类型数据【存：数组、对象那些】

<template>
  <div>{{ result.msg2 }}</div>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const result = reactive({
      msg2: "hi world",//里面是对象哦
    });
    console.log(result);//获取数据 //这里就不用value了
    return {
      result,
    };
  },
};
</script>

面试题

vue2 的双向数据绑定原理和 vue3 有什么区别？

• vue2：
  • 采用的：Object.definePrototype()
  • 称之为：数据劫持
• vue3：
  • 采用的：new Proxy()
  • 称之为：数据代理