vue3
vue3介绍
vue3完全兼容vue2
# tree-shaking是一种消除死代码的性能优化理论
# TypeScript
-javascript:坑---》填坑---》弱类型
-typeScript:强类型语言
组合式api和配置项api
vue3 兼容vue2---》vue2的内容,vue3完全适用
vue3 不建议这么用了,建议使用组合式api,不建议使用配置项api
配置项api:
export default { data(){ name:ss } mehtods:{ console.log(name) } }
组合式api:
setup{ var name =ss console.log(name) }
创建vue3项目
两种方式:
vue-cli:vue脚手架---》创建vue项目---》构建vue项目--》工具链
跟之前一样
- vite :https://cn.vitejs.dev/
-npm create vue@latest
选择即可
运行vue3项目
vue-cli跟之前一样
vite创建的:
npm install
npm run dev
vite为什么启动的快
冷启动,热加载,按需编译
编程语言的链式调用
对象.changeName('lqz').printName().showAge()
python实现链式调用
class Person:
def changeName(self,name):
self.name=name
return self
def printName(self):
print(self.name)
return self
setup函数
使用vue-cli创建的项目来讲
setup的两个注意点
1、setup执行时机:
在beforeCreate之前执行一次,this是undefined
2、setup参数:
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
context:上下文对象
attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
slots:收到的插槽内容,相当于this.$slots
emit:分法自定义书简的函数,相当于this.$emit
总结:
setup执行是在beforeCreate,没有this对象,以后不要用this了
如果写setup函数,想接收父组件自定义属性传入的值,需要
export default {
setup(props) {
console.log(props.msg)
},
props: ['msg']
}
如果是vue3的最新写法,想接收父组件自定义属性传入的值,需要
<script setup>
defineProps(['msg'])
</script>
ref函数
变量要具备响应式---》页面内容变化,变量和变,变量变化,页面也变
普通变量,通过ref绑定响应式
引用类型变量:通过reactive 绑定响应式
reactive函数
// 变量要具备响应式---》页面内容变化,变量和变,变量变化,页面也变
// 普通变量值类型,通过ref绑定响应式 数字,字符串
// 引用类型变量:通过reactive 绑定响应式 对象,数组
因为引用了组件所以setup中要传入props,因为组件中有
HomeView.vue
HelloWorld.vue
data无法拿出原来的对象,他是代理对象
ref
作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
JS中操作数据: xxx.value
模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
备注:
接收的数据可以是:基本类型(值类型)、也可以是对象(引用类型)类型。
reactive
作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
reactive定义的响应式数据是“深层次的”,无论套多少层,都具备响应式
# 总结:
如果用基本数据类型:数字,字符串,布尔,用ref做响应式
如果是对象类型,用ref和reactive都可以,但是建议使用reactive
如果使用ref包裹对象类型,多了一层value
计算监听属性
计算属性
监听属性
watchEffect函数
-
watch的套路是:既要指明监视的属性,也要指明监视的回调。
-
watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。
-
watchEffect有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
- 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
生命周期
vue2 生命周期---8个
vue3 变了
-想把生命周期写下setup函数中
-把生命周期写在配置项中
beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
<template> <div class="home"> <h1>首页</h1> </div> </template> <script> import axios from "axios"; import { computed, watch, reactive, ref, watchEffect, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' export default { name: 'HomeView', setup() { // 第一个beforeCrete console.log('我是beforeCrete') // 第二个Creted let name = ref('lqz') console.log('Creted') // axios.get().then(res => { // name.value = res.data.name // }) // 直接启动定时器 let t = setInterval(() => { console.log('lqz') }, 3000 ) // 第三个:onBeforeMount onBeforeMount(() => { console.log('挂载了') }) onBeforeUnmount(() => { clearInterval(t) t = null }) return {} }, } </script>
-
作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。
-
语法:
const name = toRef(person,'name')
-
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
-
扩展:
toRefs
与toRef
功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)
# 以后vue3推荐,把setup函数的代码,直接写在script中
<script setup>
定义变量
写函数
不用return,在html中直接使用
</script>
# 使用组件,直接导入,不需要配置,直接用即可
import HelloWorld from "../components/HelloWorld.vue";
在html中直接用:<HelloWorld msg="NB"></HelloWorld>
# 自定义属性,在子组件中接收
<script setup> defineProps({ msg: { type: String, required: true } }) </script>