前言
双向数据绑定的核心:实现响应式对象,这里介绍两种响应式数据的声明方式:ref
与reactive
ref
ref
包装基础类型
<body>
<div id="app">
<div>{{number}}</div>
<div v-on:click="onClick">onClick</div>
</div>
</body>
<script>
const {createApp, ref} = Vue;
// ref 双向数据绑定
let number = ref(18);
const app = {
// 入口函数
setup() {
function onClick(event) {
number.value ++;
console.log(number.value)
}
return {
number,
onClick
}
}
}
// 挂载(建立vue与dom的联系)
createApp(app).mount('#app')
</script>
reactive
reactive
包装Object
对象(深层次包装,兼顾下面所有属性)
<body>
<div id="app">
<div>{{profile}}</div>
<div v-on:click="onClick">onClick</div>
</div>
</body>
<script>
const {createApp, reactive} = Vue
// reactive 双向数据绑定
const profile = reactive(
{number: 18}
)
const app = {
// 入口函数
setup() {
function onClick(event) {
profile.number ++;
console.log(profile.number)
}
return {
profile,
onClick
}
}
}
// 挂载(建立vue与dom的联系)
createApp(app).mount('#app')
</script>
![](https://img-blog.csdnimg.cn/d1b51b924c4d4ea88f8fecaa32708d63.jpg)