vue3 响应式 ref 、reactive、computed的区别，和watch 监听器的使用

2.0的时候使用的是Object.defineproperty()做的数据劫持
3.0的是使用proxy代理模式进行更新，可以监听数组，只不过穿得参数是一盒数组烦死返回的是对象形式

ref原理

ref官方文档说明是：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value

import { ref } from 'vue';
const userList = ref([
  { id: 1, name: '张三' }
])
console.log(userList.value.id)  //1
const refParam = ref();
console.log(refParam)     // 返回是一个RefImpl {_rawValue: undefined, _shallow: false, __v_isRef: true, _value: undefined}
//ref的参数可以是一个任意值，返回的值是当前的参数，或者是一个undefined;
并且如果你什么也不传也可以，会返回一个响应式对象但是value是undefined;

1
2
3
4
5
6
7
8
9
10

reactive

如果是一个对象，则使用做深度代理，否则直接返回

const loginForm = reactive({
  username: '',
  password: '',
  imageCode: '',
  smscode: '',
})
 const { password, username, smscode, imageCode } = loginForm
  const params = {
    username,
    smscode,
    imageCode,
    password: encryptedPassword,
    grant_type: 'password',
    scope: 'all',
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

computed 计算机属性

computed支持读写操作,不可以进行修改操作，但是我们如果想要修改这个值的话就需要使用对象形式的参数，注意{get() =>{}, set() => {}}get和set是搭配使用的，否则出错误

// 只读模式操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误！
1
2
3
4
5
6
7

// 读写模式操作
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0
1
2
3
4
5
6
7
8
9
10
11

总结：
ref：用来定义基本数据类型
reactive：用来定义对象（数组）类型数据

ref： 通过使用 Proxy 来实现响应式
reactive：通过使用 Proxy 来实现响应式

ref：用 ref 定义的数据，操作需要 .value
reactive ： 定义的数据，操作不需要

首先ref对比reactive，reactive只能接收一个引用对象，不可以传递普通类型的数据，比如字符串、数字等，但是ref可以，因为ref返回的是一个响应式代理对象，这个对象value值就是我们的传递参数；所以如果是想代理一个对象或者是数组还是使用reactive更合适，如果我们想要代理一个普通类型的值就需要使用ref去代理更合理；

computed与 vue2 中的 computed 配置功能一致

computed接收一个响应式的对象或者值，并且还可以对这个接收的目标进行操作，但是他本身并不是一个响应式的信息，只不过是对这个响应式的参数进行了追踪，获取和修改的操作；

watch 监听器

watch与 vue2 中的 watch 配置功能一致

import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//监视 ref 定义的多个响应式数据
let msg = ref("你好啊")

let sum = ref(0)

watch([sum,msg],(newValue,oldValue)=>{

console.log("监听sum变了",newValue,oldValue)

},{immediate:true})

ps：watch 一共可以传递三个值，第一个 监视的数据，监视的行为，watch 的配置
1
2
3
4
5
6
7
8
9
10
11
12