当前位置：首页 > news >正文

Vue3 Day1Day2-Vue3优势ref、reactive函数

news 来源：原创 2024/9/19 8:43:31

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>