Vue3笔记——（尚硅谷张天禹Vue笔记)

<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>性别：{{sex}}</h2><h2>vue2和vue3的数据a冲突的时候的以vue3的setup为主{{a}}</h2><button @click="sayHello">说话（Vue3配置的sayHello方法）</button><br/><br/><button @click="sayWelcome">说话（Vue2配置的sayWelcome方法）</button><br/><br/><button @click="test1">测试一下在vue2中读取vue3中的数据和方法</button><br/><br/><button @click="test2">测试一下在vue3中读取vue2中的数据和方法</button>
</template><script>
import {h} from "vue"
export default {name: 'App',data() {return {sex:"男"  ,a:100}},methods:{sayWelcome(){alert('欢迎来到尚硅谷学习'); },test1(){//在vue2中读取vue3是可以的console.log(this.sex)console.log(this.name)console.log(this.age)console.log(this.sayHello)}},setup(){  // setup是所有Composition API(组合API)“表演的舞台”。组件中所用到的:数据、方法等等，均要配置在setup中。//data直接往这里面写 ，变量用let，常量用constlet name = "张三";let age = 18;let a = 200;//方法也直接写functionfunction sayHello(){alert(`我叫${name}，我${age}岁了，你好啊`)//使用``加${}传数据};function test2(){//在vue3中读取vue2，读取不到console.log(this.name)console.log(this.age)console.log(this.sex)  // undefinedconsole.log(this.sayWelcome)  // undefined}//setup的return若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )return{name,age,sayHello,test2,a,}// 若返回一个渲染函数:则可以自定义渲染内容。(了解)  会覆盖掉template中的所有内容// return()=>{ return h("h1","尚硅谷")}/* return()=> h("h1","尚硅谷") */}
}
</script>

<template><h1>一个人的信息</h1><!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value --><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeInfo">修改人的信息</button>
</template><script>
import {h} from "vue"
import {ref} from 'vue'
export default {name: 'App',setup(){/* let name = "张三";let age = 18; */// 把普通数据变成一个响应式的数据let name = ref("张三")let age = ref(18)function changeInfo(){/* name = '李四'age = 48 */// 由于name和age为ref函数得到的引用对象，通过get和set做的响应式，所以我们要通过.vauename.value = '李四'age.value = 48}return{name,age,changeInfo}}
}
</script>

<template><h1>一个人的信息</h1><!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value --><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h3>手机品牌：{{phone.brand}}</h3><h3>手机颜色：{{phone.color}}</h3><button @click="changeInfo">修改人的信息</button>
</template><script>
import {h} from "vue"
import {ref} from 'vue'
export default {name: 'App',setup(){/* let name = "张三";let age = 18; */// 把普通数据变成一个响应式的数据let name = ref("张三")let age = ref(18)// ref函数处理对象类型let phone = ref({brand:"redmi", color:"red"})function changeInfo(){/* name = '李四'age = 48 */// 由于name和age为ref函数得到的引用对象，通过get和set做的响应式，所以我们要通过.vauename.value = '李四'age.value = 48phone.value.brand="xiaomi" //ref函数对象类型的属性修改数据phone.value.color="green"}return{name,age,changeInfo,phone}}
}
</script>

<template><h1>一个人的信息</h1><!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value --><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h3>手机品牌：{{phone.brand}}</h3><h3>手机颜色：{{phone.color}}</h3><h3>hobby：{{hobby}}</h3><h3>测试的数据d：{{a.b.c.d}}</h3><button @click="changeInfo">修改数据</button>
</template><script>
import {h} from "vue"
import {ref,reactive} from 'vue'
export default {name: 'App',setup(){// 把普通数据变成一个响应式的数据let name = ref("张三")let age = ref(18)// reactive将对象变为响应式的let phone = reactive({brand:"redmi", color:"red"})let a = reactive({b:{c:{d:666}}})let hobby = reactive(['看喜羊羊','看灰太狼','看光头强'])function changeInfo(){name.value = '李四'age.value = 48phone.brand="xiaomi" //active函数对象类型的属性修改数据phone.color="green"a.b.c.d=999hobby[0] = '看熊出没'}return{name,age,changeInfo,phone,a,hobby}}
}
</script>

<template><div><h1>我是Vue2的写法</h1><h2 v-show="person.name">姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>爱好：{{person.hobby}}</h2><h2 v-show="person.sex">性别：{{person.sex}}</h2><button @click="addSex">添加一个sex属性</button><button @click="deleteName">添加一个name属性</button><button @click="updateHobby">修改第一个爱好的名字</button></div>
</template>
<script>
import Vue from 'vue'
export default {name:"App",data() {return {person:{name:'张三',age:18,hobby:["看喜羊羊",'看灰太狼','看光头强']}}},methods:{addSex(){/* console.log(this.person.sex) //undefinedthis.person.sex='女'console.log(this.person.sex) //'女'  确实新增了sex属性了，但页面不更新，defineProperties监测不到 */this.$set(this.person,"sex",'女') //可通过这种和下面这种方式加上这个属性 // Vue.set(this.person,"sex",'女')},deleteName(){/* console.log(this.person.name) // '张三'delete this.person.nameconsole.log(this.person.name)// undefined 确实删除了name，但页面中监测不到，页面还是不变 *///this.$delete(this.person,"name")Vue.delete(this.person,"name")},updateHobby(){// this.person.hobby[0] = '看大大怪' // 这样修改确实能修改，但页面监测不到，页面上的数据不变//this.$set(this.person.hobby,0,"看大大怪")// 或使用数组的方法，如push shift splice等，这些方法为vue对普通方法的封装，可以监测到this.person.hobby.splice(0,1,'看小小怪')}}
}
</script>

<template><h1>一个人的信息</h1><!-- ref引用对象，在模板中不用name.value，模板自动会解析加上.value --><h2 v-show="person.name">姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2 v-show="person.sex">性别：{{person.sex}}</h2><h3>手机品牌：{{person.phone.brand}}</h3><h3>手机颜色：{{person.phone.color}}</h3><h3>hobby：{{person.hobby}}</h3><button @click="changeInfo">修改数据</button><button @click="addSex">添加一个sex属性</button><button @click="deleteName">删除一个name属性</button></template><script>
import {ref,reactive} from 'vue'
export default {name: 'App',setup(){let person = reactive({name:"张三",age:18,phone:{brand:"redmi", color:"red"},hobby:['看喜羊羊','看灰太狼','看光头强']})function changeInfo(){person.name = '李四'person.age = 48person.phone.brand="xiaomi" //active函数对象类型的属性修改数据person.phone.color="green"person.hobby[0] = '看熊出没'   //直接通过数组下标修改元素也是可以响应式的，页面也会发生变化}function addSex(){person.sex = '男' // 添加一个不存在的属性，页面可以发生变化，做了响应式，reactive的原因。}function deleteName(){delete person.name}return{person,changeInfo,addSex,deleteName}}
}
</script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">//源数据let person = {name : "张三",age : 18}//模拟vue2中实现响应式//#region/* let p = {}Object.defineProperties(p,"name",{configurable:true, //声明为可配置的，就允许被删除了get(){ //有人读取的时候调用return person.name},set(value){console.log("有人修改了name属性，发现了，要去更新界面!")person.name = value}})Object.defineProperties(p,"age",{get(){ //有人读取的时候调用return person.age},set(value){console.log("有人修改了age属性，发现了，要去更新界面!")person.age = value}})// 然后再f12控制台中，person.name = '李四' person.sex = '男' delete person.name 之类操作查看结果 *///#endregion//模拟vue3中实现响应式const p = new Proxy(person,{ //就会进行代理，person中的属性都会有get和set了，下面代码可以里面的api做响应式//有人读取p的某个属性式调用get(target,propName){console.log(`有人读取了p身上的${propName}属性`)return target[propName]},// 有人修改了p的某个属性，或给p追加某个属性时调用set(target,propName,value){console.log(`有人修改了p身上的${propName}属性，我要去更新页面了！`)target[propName] = value},//有人删除p的某个属性时调用deleteProperty(target,propName){console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`)return delete target[propName]}})// f12中person.name='李四'等操作即可</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">//源数据let person = {name : "张三",age : 18}//模拟vue2中实现响应式//#region/* let p = {}Object.defineProperties(p,"name",{configurable:true, //声明为可配置的，就允许被删除了get(){ //有人读取的时候调用return person.name},set(value){console.log("有人修改了name属性，发现了，要去更新界面!")person.name = value}})Object.defineProperties(p,"age",{get(){ //有人读取的时候调用return person.age},set(value){console.log("有人修改了age属性，发现了，要去更新界面!")person.age = value}})// 然后再f12控制台中，person.name = '李四' person.sex = '男' delete person.name 之类操作查看结果 *///#endregion//模拟vue3中实现响应式//#regionconst p = new Proxy(person,{ //就会进行代理，person中的属性都会有get和set了，下面代码可以里面的api做响应式//有人读取p的某个属性式调用get(target,propName){console.log(`有人读取了p身上的${propName}属性`)// return target[propName]return Reflect.get(target,propName)},// 有人修改了p的某个属性，或给p追加某个属性时调用set(target,propName,value){console.log(`有人修改了p身上的${propName}属性，我要去更新页面了！`)// target[propName] = valueReflect.set(target,propName,value)},//有人删除p的某个属性时调用deleteProperty(target,propName){console.log(`有人删除了p身上的${propName}属性，我要去更新页面了！`)// return delete target[propName]return Reflect.deleteProperty(target,propName)}})//#endregion//#region/* //Reflect.definedProperty反射对象去操作let obj = {a:1,b:2}//除了obj.a = 666 还能Reflect.set(obj,'a',666)的方式修改a Reflect.deleteProperty(obj,'a')的方式删除a//通过Object.defineProperty去操作Object.defineProperty(obj,'c',{get(){return 3}})Object.defineProperty(obj,'c',{get(){return 4}})//如上Object.defineProperty对obj定义追加了c重复了，就会报错，这样容错性不太好，需要try-catch包裹起来//但使用如下Reflect.definedProperty反射对象去操作后，重复后就不会报错const x1 = Reflect.defineProperty(obj,'c',{get(){return 3}})const x2 = Reflect.defineProperty(obj,'c',{get(){return 4}})//可通过if-else判断if(x2){console.log("某某操作成功了")}else{console.log("某某操作失败了")} *///#endregion</script>
</body>
</html>

<template><Demo msg='你好' school='尚硅谷' @hello='showHelloMsg'><span>尚硅谷</span></Demo>
</template><script>
import Demo from "./components/Demo.vue"
export default {name: 'App',components:{Demo},setup(){function showHelloMsg(value){alert(`你好啊，你触发了hello事件，我收到的参数是:${value}`)}return {showHelloMsg}}
}
</script>

<template><h1>一个人的信息</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><button @click="test">测试触发一下Demo组件的Hello事件</button>
</template><script>
import { reactive } from 'vue'
export default {name:'Demo',props:['msg','school'],emits:['hello'],setup(props,context) {// console.log("-----setup-----",props)// console.log("---setup---",context)// console.log("---setup---",context.attrs)//相当于vue2中的$attrs// console.log("---setup---",context.emit) // 触发自定义事件的console.log("---setup---",context.slots) //插槽//数据let person = reactive({name:'张三',age:18})function test(){context.emit('hello',666)}return {person,test}} 
}
</script><style></style>

<template><Demo/>
</template><script>
import Demo from "./components/Demo.vue"
export default {name: 'App',components:{Demo},
}
</script>

<template><h1>一个人的信息</h1>姓：<input type="text" v-model="person.firstName"><br/>名：<input type="text" v-model="person.lastName"><br/><!-- <span>全名：{{fullName}}</span> --><span>全名：{{person.fullName}}</span><br/>全名：<input type="text" v-model="person.fullName">
</template><script>
import { reactive ,computed} from 'vue'
export default {name:'Demo',/* computed:{ // 在vue3中是可以像vue2中写计算属性的。但不推荐。fullName(){return this.person.firstName + '-' + this.person.lastName}}, */setup() {let person = reactive({firstName:'张',lastName:"三"})// 计算属性-简写（没有考虑计算属性被修改的情况)/* let fullName = computed(()=>{return person.firstName + "-" + person.lastName}) *//* person.fullName = computed(()=>{return person.firstName + "-" + person.lastName}) */// 计算属性的完整写法（考虑读和写）person.fullName = computed({get(){return person.firstName + '-' +person.lastName},set(value){const nameArr = value.split('-')person.firstName=nameArr[0],person.lastName=nameArr[1]}})return {person}} 
}
</script><style></style>

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前的信息为：{{msg}}</h2><button @click="msg+='!'">修改信息</button>
</template><script>
import { ref, watch } from 'vue'
export default {name:'Demo',/* watch:{// vue3中也可使用vue2中的watch，不过不推荐sum(newValue,oldValue){//简写的方式，详细写法见vue2中的watchconsole.log('sum的值变化了',newValue,oldValue)}}, */setup() {let sum = ref(0)let msg = ref('你好啊')//情况1，监视ref所定义的一个响应式数据/* watch(sum,(newValue,oldValue)=>{console.log("sum变化了",newValue,oldValue)}) *///情况2，监视ref所定义的多个响应式数据  可写多个watch在vue3中/* watch(sum,(newValue,oldValue)=>{console.log("sum变化了",newValue,oldValue)})watch(msg,(newValue,oldValue)=>{console.log("msg变化了",newValue,oldValue)}) *//* watch([sum,msg],(newValue,oldValue)=>{ // newValue,oldValue分别为数组console.log("sum或msg变化了",newValue,oldValue)}) */watch(sum,(newValue,oldValue)=>{console.log("sum变化了",newValue,oldValue)},{immediate:true})//可加第三个参数为配置 但deep:true在vue3中有小问题return {sum,msg}} 
}
</script><style></style>

<template><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>薪水：{{person.job.j1.salary}}</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">增长薪资</button>
</template><script>
import { reactive, ref, watch } from 'vue'
export default {name:'Demo',setup() {let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})//情况三:监视reactive所定义的一个响应式数据的全部属性，注意，此处无法正确的获取oldValue,这是vue3的小bugwatch(person,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视console.log('person发生变化了',newValue,oldValue);})//情况四：监视reactive所定义的一个响应式数据中的某个属性watch(()=>person.age,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视console.log('person的age发生变化了',newValue,oldValue);})//情况五:监视reactive所定义的一个响应式数据中的某些属性watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视console.log('person的age或name发生变化了',newValue,oldValue);})//特殊情况  ()=>person.job 如果改job下的子属性，需要开启深度监视deep:truewatch(()=>person.job,(newValue,oldValue)=>{   //vue3中默认就开启了深度监视了，所以salary修改也能显示，且关不掉这个深度监视console.log('person的job发生变化了',newValue,oldValue);},{deep:true})return {person}} 
}
</script><style></style>

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前的信息为：{{msg}}</h2><button @click="msg+='!'">修改信息</button><hr><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>薪水：{{person.job.j1.salary}}</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="person.job.j1.salary++">增长薪资</button>
</template><script>
import { ref, reactive, watch, watchEffect } from 'vue'
export default {name:'Demo',setup() {let sum = ref(0)let msg = ref('你好啊')let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})/* watch(sum,(newValue,oldValue)=>{console.log("sum变化了",newValue,oldValue)},{immediate:true}) */watchEffect(()=>{//里面用到了哪些属性就监视谁，而且还默认第一次就加载const x1  = sum.valueconst x2 = person.job.j1.salaryconsole.log("watchEffect所指定的回调执行了");})return {sum,msg,person}} 
}
</script><style></style>

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button>
</template><script>
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {name:'Demo',setup() {let sum = ref(0)//通过组合式api的形式去使用生命周期钩子 优先级setup的高于配置项的onBeforeMount(()=>{console.log("---onBeforeMount---");})onMounted(()=>{console.log("---onMounted---");})onBeforeUpdate(()=>{console.log("---onBeforeUpdate---");})onUpdated(()=>{console.log("---onUpdated---");})onBeforeUnmount(()=>{console.log("---onBeforeUnmount---");})onUnmounted(()=>{console.log("---onUnmounted---");})return {sum,}},//#region // 通过配置项的形式引用生命周期钩子
/*     beforeCreate() {console.log('beforeCreate')},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log('mounted')},beforeUpdate() {console.log('beforeUpdate')},updated() {console.log('updated')},beforeUnmount() {console.log("beforeUnmount")},unmounted() {console.log("unmounted")},  *///#endregion
}
</script><style></style>

<template><button @click="isShowDemo = !isShowDemo">切换隐场显示</button><Demo v-if="isShowDemo"/>
</template><script>
import { ref } from 'vue'
import Demo from "./components/Demo.vue"
export default {name: 'App',components:{Demo},setup(){let isShowDemo = ref(true)return {isShowDemo}},
}
</script>

import {reactive,onMounted, onBeforeUnmount} from 'vue'// function savePoint(){
export default function (){//实现鼠标打点的数据let point = reactive({x:0,y:0})//实现鼠标打点的方法function savePoint(event){point.x = event.pageXpoint.y = event.pageYconsole.log(event.pageX,event.pageY);}//实现鼠标打点相关的生命周期钩子onMounted(()=>{window.addEventListener("click",savePoint)})onBeforeUnmount(()=>{window.removeEventListener("click",savePoint)})return point
}// export default savePoint

<template><h2>当前求和为：{{sum}}</h2><button @click="sum++">点我+1</button><hr><h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template><script>
import usePoint from '../hooks/usePoint'
import { ref,reactive,onMounted, onBeforeUnmount} from 'vue'
export default {name:'Demo',setup() {let sum = ref(0)/* let point = reactive({x:0,y:0})function savePoint(event){point.x = event.pageXpoint.y = event.pageYconsole.log(event.pageX,event.pageY);}onMounted(()=>{window.addEventListener("click",savePoint)})onBeforeUnmount(()=>{window.removeEventListener("click",savePoint)}) *///然后复用let point = usePoint()return {sum,point}},}
</script><style></style>

<template><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪水：{{job.j1.salary}}</h2><button @click="name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="job.j1.salary++">增长薪资</button>
</template><script>
import {reactive, toRef, toRefs} from 'vue'
export default {name:'Demo',setup() {let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})/* const name1 = person.nameconsole.log('%%%%%%',name1);const name2 = toRef(person,'name')  // 这里并不是又复制了一份，而是这里读取的指向的还是上面的let person里面的console.log('@@@@@',name2);  */const x = toRefs(person)  //将person中所有属性变成ref引用对象console.log(x);return {/* person,name:toRef(person,'name'),age:toRef(person,'age'),salary:toRef(person.job.j1,'salary'), *///name:ref(person.name)  //用ref的话，之后修改的就不是上面的person中的name了，而是新的ref，所以不能这么写...toRefs(person)}} 
}
</script><style></style>

<template><h4>当前x的值是：{{x.y}}</h4><button @click="x.y++">点我x+1</button><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪水：{{job.j1.salary}}</h2><button @click="name+='~'">修改姓名</button><button @click="person.age++">增长年龄</button><button @click="job.j1.salary++">增长薪资</button>
</template><script>
import {ref,reactive, toRef, toRefs,shallowReactive,shallowRef} from 'vue'
export default {name:'Demo',setup() {//let person = shallowReactive({   //浅层次的reactive，只有第一层可响应式，即下面的name和age有响应式，但salary没有响应式let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})// let x = shallowRef({ //shallowRef和ref区别为，当值为对象时，shallowRef只能修改一层，如下x的y属性就没有响应式let x = ref({y:0})return {...toRefs(person),x}} 
}
</script><style></style>

<template><h4>当前求和为：{{sum}}</h4><button @click="sum++">点我+1</button><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪水：{{job.j1.salary}}</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">增长薪资</button>
</template><script>
import {ref,reactive, toRef, toRefs,shallowReactive,shallowRef, readonly, shallowReadonly} from 'vue'
export default {name:'Demo',setup() {let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})let sum = ref(0)// person = readonly(person) //不让任何人修改这个数据，就可以用readonly，并且用person接收覆盖了原来的personperson = shallowReadonly(person) //底有第一层年龄和姓名改不了，但薪资可改的// sum = readonly(sum)// sum = shallowReadonly(sum)return {...toRefs(person),sum}} 
}
</script><style></style>