- 响应式引用：
原理： 通过proxy对数据进行封装（接受对象） 数据变化时触发模板内容更新
- ref 处理基础数据类型
<script> const root = Vue.createApp({ template:` <div> {{name}} </div> `, setup(props,context){ const {ref} = Vue; //proxy ref('周涵柔')变成proxy({value:'周涵柔'}) let name = ref('周涵柔') // let name= '周涵柔' setTimeout(()=>{ name.value = '周佳丽' },2000) return{ name } } }) root.mount('#app') </script>
- reactive 处理非基础数据类型
<body>
<div id="app"></div>
<script>
const root = Vue.createApp({
template:`
<div> {{nameObj[0]}} </div>
`,
setup(props,context){
const { reactive } = Vue;
const nameObj = reactive([123]);
setTimeout(()=>{
nameObj[0] =456
},2000)
return{ nameObj }
}
})
root.mount('#app')
</script>
</body>