I. Introduction:
Comparison between Vue3 and Vue2:
- Performance improvement: Vue3 is a framework that completely refactors Vue. new frame. The bottom layer uses TS for reconstruction, and the performance improvement can reach 100%
- For TS support, the bottom layer of Vue3 uses TS for development by default. In our Vue development process, it is generally used in combination with TS by default.
- Vue3 currently creates a project using a new packaging tool, a package released by the vite tool (xxx) team themselves. The goal kills webpack
- Added combined API and responsive API for development (hook programming)
Advantages of vue3:
Faster: vue3 rewrites the virtual dom. Much faster
Smaller: Added tree shaking technology, code that is not used in your project. Packaging will be removed by default.
Easier to maintain: the change from Flow to TypeScript makes our code more standardized
Vue2 should no longer be updated, so mastering the programming of vue3 is beneficial and harmless
2. First, you need to install the plug-in belonging to vue3 on vscode:
Then you need to disable the vue2 plugin: (otherwise the vue3 project will become popular)
Note: If you need to develop vue2 and vue3 projects at the same time, you can set a workspace for vue3 and disable vetur in the workspace
3. The difference between vue2 and vue3 in programming:
1. In Vue3, we can support creating multiple tags under the template tag at the same time.
<template>
<div>345</div>
<div>333</div>
<p>123</p>
</template>Vue3 introduces a technology similar to Fragment in React. In the future, there is no need to create a root tag in the template. Fragment is used by default for page processing.
2、
<script lang='ts' setup>
</script>Above this tag, lang="ts" means that in this script tag in the future, we can support ts code. When we package later, the content in the script tag will be parsed into js code by default
Steup: Vue3 uses new APIs for programming. If these APIs want to be recognized by our framework, we must add a steup flag to the script tag, so that we can package and render the syntax of vue3
3. In our Vue3 project, the creation project does not support less and scss by default. To use these two technologies, we need to come down with the dependency package ourselves
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>4. Component introduction method:
In the Vue3 project, we need to introduce external components, components folder components
Features:
- After introducing the component, we don't need to register and render it directly on the page
- The src/components folder has been loaded by default, and the components under this folder can be imported globally.
You don't need to import important components, a certain component is used by default, go directly to src /components to find
<template>
<h3>这是App</h3>
<Product></Product>
<User></User>
</template>
<script lang='ts' setup>
</script>
<style lang='scss' scoped>
.box {
.h3 {
color: red;
}
}
</style>5. Combined api-ref is provided in vue3
ref is a combined API that requires us to introduce it into the project to define the internal data of the component
import {ref} from "vue"
Define internal data through ref
<template>
<div>
<h3>Reactive</h3>
<p>{
{count}}</p>
<button @click="count=100">修改</button>
<!-- 只要在template输出这个对象，默认调用value -->
<p>{
{username}}</p>
<button @click="changeUsername">修改username</button>
</div>
</template>
<script lang='ts' setup>
// 定义组件内部数据
import {ref} from "vue"
// 定义一个基本数据类型,useState
const count = ref(50)
const username = ref("xiaowang")
// 函数直接定义script标签里面
const changeUsername = ()=>{
console.log(username);
// username得到的不是一个普通数据类型，而是一个对象。
username.value = "xiaofeifei"
}
</script>
<style lang='less' scoped>
</style>If you want to obtain or modify the currently defined variables in the script tag, you must 对象.valueimplement it in a necessary way
But in the template tag, we can directly use the variables defined by ref
6. Combined api -reactive is provided in vue3
The reactive definition data is a bit different from ref, and all data can be defined as an object, which is convenient for us to call
<template>
<div>
<h3>Reactive</h3>
<p>{
{state.count}}</p>
<p>{
{state.user}}</p>
<button @click="++state.count">+</button>
<button @click="--state.count">-</button>
</div>
</template>
<script lang='ts' setup>
import { reactive } from 'vue';
/**
* reactive定义组件内部数据
* 类似于React 类组件 State
*/
const state = reactive({
count:10,
user:{
id:1,name:"xiaowang"
},
stus:[1,2,3]
})
</script>
<style lang='less' scoped>
</style>suggestion:
Basic data types we use ref to define
Reference type data we use reactive to define
The data defined by Reactive, when modifying, does not need to modify the value, just change the value directly
7. Calculated properties
Computed properties in Vue2
export default {
computed:{
fullName(){
return this.firstName + this.lastName
}
}
}All operations provided by Vue3 are presented in the form of combined APIs.
If we want to implement computed attributes, we also need to import computed attribute modules to perform computed attribute operations
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"王"
})
const fullName = computed(()=>{
return state.firstName + state.lastName
})
</script>
<style lang='less' scoped>
</style>Computed attributes are also encapsulated as a combined API, and we need to introduce this API to perform computed attribute business.
computed is encapsulated into a function, when the property needs to be calculated, call this function to get the result
This programming method is more biased towards hook programming
Grammar 2:
<template>
<div>
<h3>
computed
</h3>
<p>{
{fullName}}</p>
<p>{
{upperCaseName}}</p>
<p>{
{newValue}}</p>
<button @click="newValue='zhang'">修改newValue</button>
<button @click="state.firstName='老'">修改姓</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,computed} from 'vue'
const state = reactive({
firstName:"小",
lastName:"wang"
})
const newValue = computed({
get(){
console.log(123);
return state.lastName
},
set(val){
console.log(val);
}
})
</script>
<style lang='less' scoped>
</style>Syntax 2 is relatively seldom used. The value of the calculated attribute is generally obtained and used, and rarely modified
8、watch
Syntax of Vue2
export default {
data(){
return {
username:"xiaowang"
}
},
watch:{
username:{
//当我们监控的username发生变化的时候，默认执行handler
handler(value){
}，
deep:true,
immediate:true
}
}
}The watch in Vue3 is also provided in the form of api
<template>
<div>
<h3>watch模块</h3>
<p>原始数据：{
{state.username}}</p>
<p>{
{state.user}}</p>
<button @click="state.username = 'xiaofeifei'">修改username</button>
<button @click="state.user.name = 'xiaoliu'">修改user</button>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,watch} from 'vue'
const state = reactive({
username:"xiaowang",
user:{
id:1,name:"王二麻子"
}
})
// 监听watch模块
// 第一个回调函数，要监控的属性是哪些。
// 第二个回调函数，数据发生变化，要执行业务
watch(
()=>state.username,
(val,prevVal)=>{
console.log(val);
console.log(prevVal);
}
)
</script>
<style lang='less' scoped>
</style>If we want to monitor the user object
When we want to monitor data of reference type. Need for Deep Listening and Immediate Listening
The third parameter: provide an object, add deep: true, immediate: true to the object
watch(
() => state.user,
(val, prevVal) => {
console.log(val);
console.log(prevVal);
},
{
deep:true,
immediate:true
}
)9. watchEffect function
Reactive keeps track of your dependencies and executes callbacks as soon as changes are detected.
Both watchEffect and watch are used to monitor the page.
watchEffect provides a callback function, which uses certain attributes in reactive, as long as these attributes change, we can monitor them
watchEffect(()=>{
// 里面可以执行异步请求，日志记录等等
console.log(state.username);
// 监控user这个对象地址发生变化，里面属性变化检测
console.log(state.user);
// 使用了user对象里面某个属性才能监控到
console.log(state.user.name);
})Only when the variables used in wactEffect change, can we monitor it.
If you refer to type data, you can only monitor changes in the address. Unless specified to monitor a property in the reference type
watchEffect can monitor many attributes at one time.
10. Declaring periodic functions
In VUE2, we declare that the periodic function can be used directly.
export default {
mounted(){
},
created(){
}
}All declaration cycle functions in Vue3 need to be imported and used
<template>
<div>
<h3>
声明周期函数
</h3>
</div>
</template>
<script lang='ts' setup>
import { reactive,ref,onMounted} from 'vue'
onMounted(()=>{
console.log("页面挂载完成后执行");
})
</script>
<style lang='less' scoped>
</style>The difference between option API and Vue combined API function:
| Optional API | Hook inside setup |
|---|---|
beforeCreate |
Not needed |
created |
Not needed |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeDestory |
onBeforeUnmount |
| destory | onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
11. Parent-child component value transfer method
The parent-child components of vue2 and vue3 have different ways of passing parameters, but the length is too long, and a new article has been opened
Vue2 component pass parameters:
vue3 component pass parameters:
12. filter filter
13. When an object is to be obtained in vue3, the value of the object will not be printed directly, but a proxy
For details, please see:
14. Dynamic import method of pictures
The dynamic introduction of static resources in vue2 uses require ('path'), but require cannot be used in vue3
For details, please see: