App.vue:
<template>
? <img alt="Vue logo" src="./assets/logo.png" />
?<!-- ?<br>
? ref:<input type="text" v-model="msg"><br>
? 無ref:<input type="text" v-model="msg2">
? <button @click="updataMsg">修改msg</button>
? <h1>{{msg}}</h1>
? <h1>{{msg2}}</h1>
? <h2 @click="changeFn">{{flag}}</h2>
? <button @click="updataName">修改姓名</button> |
? <button @click="delAge">刪除年齡</button> |
? <button @click="addSchool">新增學(xué)校</button> |
? <h1>姓名:{{obj.name}} ?年齡:{{obj.age}} 學(xué)校:{{obj.school}}</h1> -->
?<!-- ?<comp-b :msg="msg" @changzi="changzi"/> -->
?<h1 @click="str1Change">{{msg1}}</h1>
?<h1 @click="objChange">{{obj.name}}--{{obj.age}}</h1>
?<h1 >{{str}}</h1>
?<h1>{{s}}</h1><hr>
?<comp-c/>
</template>
<script>
import CompC from './components/CompC.vue'
import {computed, reactive, ref, watch,provide} from 'vue'
/* import CompB from './components/CompB.vue' */
export default {
? name: 'App',
? components:{
? ?/* CompB */
? ?CompC
? },
? /* created(){
? ?console.log('created');
? }, */
? /* setup 函數(shù)出現(xiàn)的速度比created要快 執(zhí)行的順序比creatd要快 */
? setup:function(){
? ? /* 基本數(shù)據(jù)類型ref */
? ? /* 引用數(shù)據(jù)類型reactive */
? ? /* console.log('setup');
? ? let msg = ref('你好');
? ? let msg2 = ('你好');
? ? let flag = ref(true);
? ? let obj = reactive({
? ? ? name:'張三',
? ? ? age:30
? ? })
? ? function updataMsg(){
? ? ? ?msg.value = '我修改了msg'
? ? }
? ? function changeFn(){
? ? ? flag.value = false
? ? }
? ? function updataName(){
? ? ? obj.name = '李四'
? ? }
? ? function delAge(){
? ? ? delete obj.age
? ? }
? ? function addSchool(){
? ? ? obj.school = '北大'
? ? }
? ? return {
? ? ? msg:msg,
? ? ? msg2:msg2,
? ? ? updataMsg:updataMsg,
? ? ? flag:flag,
? ? ? changeFn:changeFn,
? ? ? obj:obj,
? ? ? updataName:updataName,
? ? ? delAge:delAge,
? ? ? addSchool:addSchool
? ? } */
? ? /* let msg = ref('謝謝你')
? ? function changzi(s){
? ? ? ?msg.value = s
? ? }
? ? return{
? ? ? msg,
? ? ? changzi
? ? } */
? ? let msg1 = ref('聽我說謝謝你')
? ? let str2 = ref('因?yàn)橛心?)
? ? let obj = reactive({
? ? ? name:"張三",
? ? ? age:30
? ? })
? ? /* vue3中使用provide 實(shí)現(xiàn)爺孫組件通信 */
? ? /* 提供數(shù)據(jù) 提供的數(shù)據(jù)名 數(shù)據(jù)值 */
? ? ?provide('info',obj)
? ? let str = computed(()=>{
? ? ? return msg1.value +str2.value
? ? })
? ? let s = computed(()=>{
? ? ? return msg1.value +str2.value+'溫暖了四季'
? ? })
? ? function str1Change(){
? ? ? ? msg1.value = 'ssadsad'
? ? }
? ? /* 在vue3中使用watch監(jiān)聽器 監(jiān)聽基本數(shù)據(jù)類型 */
? ? /* watch 第三個(gè)參數(shù)使用{immediate:true} 實(shí)現(xiàn)已進(jìn)入頁面立即監(jiān)聽*/
? ?/* ?watch(str,(newV,oldV)=>{
? ? ? console.log('新值是:'+newV);
? ? ? console.log('舊值是:'+oldV);
? ? },{immediate:true}) */
? ? ?function objChange(){
? ? ? ?obj.name = 'lisi'
? ? ?}
? ? ?/* vue3中實(shí)現(xiàn)對(duì)引用數(shù)據(jù)類型obj的監(jiān)聽 */
? ? /* watch(obj,()=>{
? ? ?console.log('我被監(jiān)聽了');
? ? }) */
? ? /* watch 對(duì) 對(duì)象里面單獨(dú)的某一個(gè)屬性進(jìn)行監(jiān)聽的時(shí)候需要使用箭頭函數(shù)的方式 */
? ? watch(()=>obj.name,()=>{
? ? ? console.log('name被監(jiān)聽了');
? ? })
? ? return{
? ? ? ?msg1,
? ? ? ?str2,
? ? ? ?str,
? ? ? ?s,
? ? ? ?str1Change,
? ? ? ?obj,
? ? ? ?objChange
? ? }
? }
}
</script>
CompB組件：
<template>
<!-- vue3 支持多個(gè)根元素 -->
? <h1 @click="changeZ">{{msg}}</h1>
? <h1>{{msg}}</h1>
</template>
<script>
export default {
props:['msg'],
/* ３咂堋！ setup 里面的this不指向vue實(shí)例 */
setup(props,{emit}){
? ? /* 在setup 里面使用props的數(shù)據(jù),需要借助于setup方法第一個(gè)參數(shù) */
/* ? console.log(props.msg); */
? /* 在setup 中 使用子改父,需要借助于setup方法的第二個(gè)參數(shù) */
? /* ?console.log(context); */
? ?function changeZ(){
? ? ? ?emit('changzi','因?yàn)橛心?)
? ?}
? ?return{
? ? ? ?changeZ
? ?}
}
}
</script>
<style>
</style>
CompC組件：
<template>
? {{c}}
</template>
<script>
import {inject} from 'vue'
export default {
? setup(){
? ? ? /* 在vue3中導(dǎo)入inject 來實(shí)現(xiàn)爺孫通信,記得把值return出去 */
? ? ? const c = inject('info')
? ? ? return{
? ? ? ? ? c
? ? ? }
? }
}
</script>
<style>
</style>
