1.setup函数 入口
2.reactive 函数 ,让复杂数据类型变成响应式
3.ref函数,将基本数据类型变成响应式
4.toRefs-解构保留响应式状态
5.readonly 让数据变成只读状态
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<input type="text" v-model="msg">
<h1 @click="xgmsg">{{msg}}</h1><br>
<h1>姓名：{{obj.name}}年龄{{obj.age}}学校：{{obj.school}}</h1>
<button @click="xg">改name</button>
<comp-b :msg="msg" @changez="changez" />
<br>
<h1 @click="wch">{{str1}}</h1>
<h1>{{str}}</h1>
<comp-c></comp-c>
</template>
<script>
import {ref,reactive,computed,watch,provide} from 'vue'
import CompB from './components/CompB.vue';
import CompC from './components/CompC.vue';
export default {
name: 'App',
setup:function(){
let msg = ref('你是大聪明');
let obj = reactive({
name:'张三',
age:30
})
provide('info',obj);
let str1 = ref('感恩的新');
let str2 = ref('感谢有你');
let str = computed(()=>{
return str1.value + str2.value
})
function wch(){
str1.value = '春天来啦'
};
/* watch(str1,(newV,oldV)=>{
console.log("新值："+newV);
console.log("旧值："+oldV);
},{immediate:true}) */
/* watch(obj,()=>{
console.log('监听');
}) */
watch(()=>obj.name,()=>{
console.log('被监听了');
})
function xgmsg(){
msg.value = '你不是大聪明'
};
function changez(s){
msg.value = s
}
function xg(){
obj.name = "lisi"
}
return {
msg:msg,
xgmsg:xgmsg,
obj:obj,
changez:changez,
str1:str1,
str2:str2,
str:str,
wch:wch,
xg:xg
}
},
components: {
CompB,
CompC
},
}
</script>
