vue3学习笔记——声明响应式数据 ref | reactive

前言:

这是个人学习vue3的笔记，文章内容仅自己学习理解。如有错误或者不足地方强烈欢迎各位指正！

vue3学习笔记——setup()

---

声明响应式数据

ref | reactive 都是vue3声明响应式数据的函数
响应式原理：
ES5:Object.defineProperty -> ES6: Proxy
[优点] 1.懒代理,提高性能 2.告别Vue.set

ref

val: 监听基本数据类型的变化

需要import 引入ref
 setup(){
      console.log("setup执行");
      const girl = ref("芝麻开花")
        console.log(girl);
            return{
        girl
      }
     }

ref接受参数并将其包装在具有value属性的对象中，然后将其用于访问或更改反应变量的值

 setup(){
      console.log("setup执行");
      const girl = ref("芝麻开花")
      const change = ref("")
       const changeGirl = (index)=>{
        // girl对应的索引对应的值 赋值
        change.value = girl.value[index]
        } 
        console.log(girl);
        console.log(girl.value);
        girl.value = "萨瓦迪卡"
               return{
        girl
      }
  }

注意： 在setup函数中需要用.value来获取值，模板中则不用

reactive

reactive 接收一个普通对象然后返回该普通对象的响应式代理，等同于 2.x 的 Vue.observable()。不能解构。会失去响应式，
可以使用refs，toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。

eg:

虽然 ref 和 reactive 的最底层都是 Proxy，那是因为 ref 的底层本质是 reactive.当我们使用 ref 的时候，系统会自动给我们转换成：ref(xx)=>reactive({value:xx})
在 template 中使用的是reactive类型的数据，那么Vue 不会自动帮我们添加.value

如果传入的是一个数组，则是一个proxy对象

基本类型(数字、字符串、布尔值)在 reactive 中无法被创建成 proxy 对象，也就无法实现监听。