Vue3.0 - 双向数据绑定
前言
双向数据绑定的核心：实现响应式对象，这里介绍两种响应式数据的声明方式：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>
