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>