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
      }
     }

vue3学习笔记——声明响应式数据 ref | reactive_第1张图片

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
      }
  }

vue3学习笔记——声明响应式数据 ref | reactive_第2张图片
注意: 在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 对象,也就无法实现监听。

你可能感兴趣的:(vue3,vue,javascript,前端)