<template>
<div>
<h2>{{counter}}</h2>
<button @click="changeCounter"></button>
<h3>{{user.name}}</h3>
<button @click="cheangeUserName">改变user名字</button>
</div>
</template>
<script >
// reactive可以引用对象类型
import { reactive, computed } from 'vue';
export default{
setup(props, context) {
const counter = ref(0)
function changeCounter(){
counter.value++
}
const suser = reactive({
name:"阿斯顿",
age:10
})
function cheangeUserName(){
user.name="李四"
}
//watch(侦听的响应式引用,回调函数)
watch(counter,(newval,oldval)=>{
console.log("newval-----------",newval);
console.log("oldval-----------",oldval);
})
//watchEffect(回调函数)注意不需要指点监听属性,组件初始化的时候会执行一次回调,自动手机依赖
watchEffect(()=>{
console.log("newval-----------",newval);
console.log("oldval-----------",oldval);
})
// watch和watchEffect的区别
// 1.watchEffect不需要指定监听的属性,自动手机依赖,只要在回调中引用响应式的属性,只要这些属性发生改变,回调就会发生改变
//computed的用法
const msg = ref("helloworld")
const reverseMsg=computed(()=>{
return msg.value.split("").reverse().join("")
})
const user = reactive({
name:"张三",
age:44,
reverseMsg:computed(()=>{
return msg.value.split("").reverse().join("")
})
})
return{counter,changeCounter,user};
}
}