vue3.0 ref&reactive

ref 可以接受基本类型，引用类型

1. 基本类型， 响应式原理 Object.defineProperty( )的get( )和set( )
2. 引用类型，响应原理 ref(1)->reactive({value:1}) reactive 响应原理 proxy

ref 解包

const num = ref('0')
console.log(num.value)

reactive Object，数组

const person = reactive({
    age: 18,
    name: '李四'
})

reactive 赋值响应变化

person.name
person.name = '张三'

reactive 读取值

const {name} = person //解构赋值， 失去响应性
const {name} = {...toRefs(person)} //解构赋值， 不失去响应性

for (const key in person) {
    console.log(key) // 输出reactive的key, age name ...
}

方式二, JSON.stringify 和 Object.assign 能去掉响应性

const a = ref({
		age: 18
	})
	const b = reactive({
		name: 'zty',
		sex: '男',
		a
	})

	console.log(JSON.stringify(b))

	const d = {}
	Object.assign(d, b)
	console.log(d)

v-model

<modal v-model:visible="isVisible" v-model:content="content"></modal>

<!-- 相当于 --> 
<modal :visible="isVisible" 
        :content="content" 
        @update:visible="isVisible" 
        @update:content="content" />

ref&reactive 跨组件通讯

message通讯中心 message.ts

export const mag = ref('hello')

a组件a.vue

import {msg} from 'xxx/message'

msg.value = "world"

b组件 b.vue

import {watch} from 'vue'
import {msg} from 'xxx/message'

watch(msg, (val) => {
    consloe.log(val)
})