- 引入Vue的对象 ref , reactive, watch
ref 用来声明响应式的基础类型的变量
reactive用来声明响应式的对象类型的变量
watch 引入watch对象,以便调用
import {ref, reactive, watch} from 'vue'
- 声明一个数组变量
export default {
setup(props){
let infoList = reactive([
{
name:'张三',
value: '24'
},
{
name:'李四',
value: '25'
}
])
return {
infoList
}
}
}
3、绑定事件
<button @click="changeInfoList"></button>
4、改变数组的值
export default {
setup(props){
let infoList = reactive([
{
name:'张三',
value: '24'
},
{
name:'李四',
value: '25'
}
])
function changeInfoList() {
infoList[0].value = '26'
}
return {
infoList,
changeInfoList
}
}
}
4、watch监听变量
export default {
setup(props){
let infoList = reactive([
{
name:'张三',
value: '24'
},
{
name:'李四',
value: '25'
}
])
function changeInfoList() {
infoList[0].value = '26'
}
watch(infoList ,(newVal,oldVal)=> {
console.log(newVal)
}
})
return {
infoList,
changeInfoList
}
}
}
更新时间:2021/12/4
5. watch 加载页面就触发
watch(infoList ,(newVal,oldVal)=> {
console.log(newVal)
}
},
{immediate:true}
)