初识vue3
目前vue2和vue3在市面上,平分秋色
优点
- 性能提升了1.5倍
- 体积更小
- 与TS更契合,ts就是规范版的js
- 更好支持了其它ui插件
- 适合前端学习,组合式API,函数式编程
2.0 采用 options API,每一个内容都对应一个选项,data,methods
3.0 采用 composition API,函数式编程,所有东西写在一块儿
第一次使用
npm i @vue/cli -g
vue create demo
<template>
<div class="home">
{{ num }}
</div>
</template>
<script>
//注意引用加{}
import {ref} from 'vue';
export default {
setup(){
let num=ref(1);
return{
num
}
}
}
</script>
声明变量的三种方式
- ref用来声明简单类型的变量
- relative用来声明复杂类型的变量
- toRefs用来将复杂类型的变量变成简单类型的变量
注意:无论变量还是方法,都需要return
<template>
<div class="home">
{{ num }}
<button @click="add">+1</button>
<br>
{{ name }} 的年龄 {{ age }},
</div>
</template>
<script>
//注意引用加{}
import {reactive, ref ,toRefs} from 'vue';
export default {
setup(){
let num=ref(1);
let user=reactive({
name:"jack",
age:19
});
let add=()=>{
num.value+=1,
user.age+=1
}
return{
num,
add,
// relative声明的变量
// user
// 在此处套用toRefs,声明变量
...toRefs(user)
}
}
}
</script>
computed
记得引用,赋值给一个变量并return,插值表达式使用即可
let fn1=computed(()=>{
return num1.value+=2
})
watch
watch(num,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
留言板案例
<template>
<div>
<p>标题:<input type="text" v-model="title"></p>
<p>内容:<input type="text" v-model="content"></p>
<p>搜索:<input type="text" v-model="char"></p>
<p><button @click="add">添加</button></p>
<ul>
<li v-for="(item,index) in newList" :key="index">
{{ item.title }}--{{ item.content }}
</li>
</ul>
</div>
</template>
<script>
import {ref,reactive,toRefs, computed} from 'vue'
export default{
setup() {
let title=ref("")
let content=ref("")
let char=ref("")
let list=reactive([
{title:1,content:"11111"},
{title:2,content:"22222"},
{title:3,content:"33333"},
{title:4,content:"44444"}
])
let add=()=>{
list.push({
title:title.value,
content:content.value
})
}
let newList=computed(()=>{
return list.filter(item=>item.content.includes(char.value))
})
return {
title,
content,
list,
add,
newList,
char
}
},
}
</script>
<style>
</style>
生命周期
1、setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
2、onBeforeMount() : 组件挂载到节点上之前执行的函数;
3、onMounted() : 组件挂载完成后执行的函数;
4、onBeforeUpdate(): 组件更新之前执行的函数;
5、onUpdated(): 组件更新完成之后执行的函数;
6、onBeforeUnmount(): 组件卸载之前执行的函数;
7、onUnmounted(): 组件卸载完成后执行的函数;
8、onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,激活时执行
9、onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。
vue2 -------> vue3
beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})