Day1
1.1 Vue3的优势
更容易维护
组合式API
更好的TypeScript支持
更快的速度
重写diff算法
模板编译优化
更高效的组件初始化
更小的体积
良好的TreeShaking
按需引入
更优的数据响应式
Proxy
setup中不存在this，如果想直接获取节点，就得放在onMounted(一个函数代码) 里面，记得引入它
Day2 ref、reactive
2.1 ref函数
定义：接收简单类型或者复杂类型的数据传入并返回一个响应式的对象
底层原理：如果包裹基本数据类型，底层是函数中的getter和setter；如果包裹引用数据类型，底层是proxy，原理是内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数 这个函数实际就是使用了vue3的响应式原理中的proxy。
ref基本类型用法
<template><div><h1>公主的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2 v-for="(item,index) in hobby" :key="index">爱好：{{item}}</h2><button @click="changeAge">年龄增加按钮</button></div> </template> <script setup>import {ref} from 'vue' let name = "公主";let age = ref(12);let hobby = ['美甲', '逛街'] let changeAge = () => {// 写法：xxx.valueage.value++console.log('age=>', age);} </script>ref引用类型用法
<template><div><h1>公主的信息</h1><h2>姓名：{{res.name}}</h2><h2>年龄：{{res.age}}</h2><h2 v-for="(item,index) in hobby" :key="index">爱好：{{item}}</h2><button @click="changeAge">年龄增加按钮</button></div> </template> <script setup>import {ref} from 'vue' let res = ref({name: '公主',age: 12,}) let hobby = ['美甲', '逛街']let changeAge = () => {res.value.age++console.log('age=>', res.value.age)} </script>
2.2 reactive函数
定义：接收复杂类型数据的参数传入并返回一个响应式的对象
语法：不需要使用 xxx.value得到想要的值，
注意：
不能对基本数据类型产生响应性，会出现警告
reactive的丢失响应性以及解决办法
reactive的基本使用
<template><div><h1>公主的信息</h1><h2>姓名：{{res.name}}</h2><h2>年龄：{{res.age}}</h2><h2 v-for="(item,index) in hobby" :key="index">爱好：{{item}}</h2><button @click="changeAge">年龄增加按钮</button></div> </template> <script setup>import {reactive} from 'vue' let res = reactive({name: '公主',age: 12,}) let hobby = ['美甲', '逛街']let changeAge = () => {// 不用 .value这种写法res.age++console.log('age=>', res.age)} </script>reactive的响应性
<template><div><h1>公主的信息</h1><h2>姓名：{{res.name}}</h2><h2>年龄(复杂类型的响应性)：{{res.a.b.age}}</h2><h2>简单类型的响应性：{{count}}</h2><h2 v-for="(item,index) in hobby" :key="index">爱好：{{item}}</h2><button @click="change">增加按钮</button></div> </template> <script setup>import {reactive} from 'vue' let count = reactive(13)let res = reactive({name: '公主',a: {b: {age: 12,}}}) let hobby = ['美甲', '逛街']let change = () => {count++ //报出警告// 不用 .value这种写法// res.a.b.age++ //这个不能和 count++同时出现看效果} </script>reactive丢失响应性并解决：
reactive丢失响应性，引用数据类型的值是存在堆里面，其指针存在栈里面，通过reactive包裹进行赋值（数组，对象，解构），产生新的地址（是一个普通对象），丢失原来响应式对象的引用地址
<template><div><!-- <h1>{{arr}}</h1> --><!-- <h1>{{res.newArr}}</h1> --><h1>{{num}}</h1><h1>{{res}}</h1><button @click="showInfo">按钮</button></div> </template> <script setup>import {reactive,ref} from 'vue' // 问题：reactive丢失响应性// let arr = reactive([]) // let showInfo = () => {// let res = [1, 2, 3, 4, 5, 6]// // reactive 定义数据（必须是对象），是直接调用 reactive 方法处理成响应式对象。// // 如果重新赋值，就会丢失原来响应式对象的引用地址，变成一个新的引用地址，// // 这个新的引用地址指向的对象是没有经过 reactive 方法处理的，所以是一个普通对象，而不是响应式对象。// // 解构同理// arr = res// console.log('arr=>', arr);// } // 解决办法1：不简洁，不推荐// let res = reactive({// newArr: []// })// let showInfo = () => {// let arr = [1, 2, 3, 4, 5, 6]// res.newArr = arr// console.log('res.newArr', res.newArr);// } // 解决办法2：ref来解决，推荐// let res = ref({// newArr: []// })// let showInfo = () => {// let arr = [1, 2, 3, 4, 5, 6]// res.value.newArr = arr// } // 解决办法3：产生页面更新会触发reactive响应，不推荐let res = reactive([])let num = ref(1)let showInfo = () => {let arr = [1, 2, 3, 4, 5, 6]num.value++ //ref操作后，页面重新刷新，所以会让reactive产生响应性res = arr} </script>
2.3 ref对比reactive
ref和reactive的响应性是深层次的
基本数据类型或者引用数据类型推荐用ref，引用数据类型推荐用reactive
reactive包裹引用数据类型，不需要用 xxx.value，不能对基本数据类型产生响应性，会出现警告
2.4 ref操作dom节点
<template><div><h1>公主的信息</h1><h2 ref="nling">年龄：{{age}}</h2><h2 v-for="(item,index) in hobby" :key="index">爱好：{{item}}</h2><button @click="change">变化按钮</button></div>
</template>
<script setup>import {ref} from 'vue'
let age = ref(12)// 推荐这种写法let nling = ref()
let hobby = ['美甲', '逛街']let change = () => {age.value++// ref操作dom节点nling.value.style.color = '#f60'}
</script>
<style scoped>
</style>2.5 delete操作符
2.6 父传子静态传值
非语法糖父传子
父组件
<template><div><HelloWorld name="白泽" school="观音大士学府"></HelloWorld></div> </template> <script>import HelloWorld from './components/HelloWorld.vue'export default {setup() { },components: {HelloWorld}} </script>子组件
<template><h1>{{ name }}</h1><h1>{{ school }}</h1> </template> <!-- setup取代了export default --> <script>export default {props: ['name', 'school'],setup() { }} </script> <style scoped>.read-the-docs {color: #888;} </style>语法糖父传子
父组件
<template><div><HelloWorld name="白泽" school="观音大士学府"></HelloWorld><!-- <HelloWorld school="观音大士学府"></HelloWorld> --></div> </template><script setup>import HelloWorld from './components/HelloWorld.vue' </script>子组件
<template><h1>{{ name }}</h1><h1>{{ school }}</h1><button @click="print">打印按钮</button> </template> <!-- setup取代了export default --> <script setup>// 接收父组件传过来的数据// 写法1：// defineProps(['name', 'school']) // 写法2：// defineProps({// name: String,// school: String// }) // 写法3：// defineProps({// name: {// type: String,// default: '哪吒'// },// school: String// }) // 写法4：let res = defineProps(['name', 'school']) //只读，不可修改或添加let print = () => {console.log('res=>', res); //props接收的值是静态的,当父组件传动态的值的时候,props是拿不到的,只能通过watch进行监听} </script> <style scoped>.read-the-docs {color: #888;} </style>
