[vue3] Ref Reactive

【b站-【前端面试】Vue3 ref 与 reactive 区别】

Ref:Ref用于创建一个响应式的基本数据类型,比如数字、字符串等。它将普通的数据变成响应式数据,可以监听数据的变化。使用Ref时,我们可以通过.value来访问和修改数据的值。

Reactive:Reactive则用于创建一个响应式对象,可以包含多个属性。通过Reactive,我们可以将整个对象变成响应式,使对象的任何属性发生变化时都能被检测到。

Ref

ref 接受的数据类型:基本类型,引用类型。
作用:把参数加工成一个响应式对象,全称为reference对象(简称为ref对象) 。
核心原理:
如果参数是基本类型, 那么形成响应式依赖于Object.defineProperty( )get( )set( )
如果ref的参数是引用类型,底层ref会借助reactive的proxy 定义响应式变成这样:reactive({value:‘value’})

import { ref } from 'vue'
 
// 为基本数据类型添加响应式状态
const name = ref('Neo')
 
// 为复杂数据类型添加响应式状态
const state = ref({
  count: 0
})
 
// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

可以在setup()函数中使用,管理简单的数据状态。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
};

在Vue3中,

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