vue3.0新特性
作者:互联网
一、创建一个vue3.0项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZuEr8bu-1647775515823)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320174536841.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i71wbvrN-1647775515825)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320175828858.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMKzFRpF-1647775515826)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180132454.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjtDFo8E-1647775515827)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180316082.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhnvpO37-1647775515829)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180438677.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vUhZ4eEf-1647775515830)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180711909.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kamaRfU5-1647775515830)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180839014.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fx9XvCem-1647775515832)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320180942413.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1e9t85D-1647775515835)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320181100793.png)]
vscode打开项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v7ATUW2X-1647775515836)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320181216158.png)]
二、对比vue2的新特性
1、set up、ref和reactive
以前的data、声明周期、自定义函数都可以放置在set up内,setup是相当于beforeCreate和created生命周期钩子, beforeCreate和created钩子中编写的任何代码都可以直接在setup函数中编写。在 setup 函数中必须 return 出去才可以在模板区域使用。
ref 是 vue 3.0 的新特性,其作用为创建响应式的值
reactive 是 vue 3.0 的,其作用为创建响应式的对象或数组
<template>
<p>姓名:{{ name }}</p>
<p>初始年龄:{{ age }}</p>
<p>当前年龄:{{ curAge }}</p>
<div>
学生信息:
<p>姓名:{{student.name}}</p>
<p>性别:{{student.sex}}</p>
<p>地址:{{student.address}}</p>
</div>
<button @click="add">长大</button>
<br>
<button @click="addressChange">修改地址</button>
</template>
<script >
import { ref,reactive } from "vue";//使用前,先引入
export default ({
name: "",
components: {},
setup() {
let name = ref("小明");
let age = 18;
let curAge = ref(age);//ref包裹普通数据
console.log("name", name);
//reactive包裹对象
const student=reactive({
name: '小红',
sex: '女',
address: '上海',
});
const add = () => {
curAge.value++;//ref值获取要用.value
// age++;
console.log("age", age);
console.log("curAge", curAge.value);
};
const addressChange = () => {
student.address += '浦东'
}
return {
name,
age,
curAge,
add,
student,
addressChange,
};
},
});
</script>
2、生命周期
vue2.0 | vue3.0 | 说明 |
---|---|---|
beforeCreate | setup | 组件创建之前 |
created | setup | 组件创建完成 |
beforeMount | onBeforeMount | 组件挂载之前 |
mounted | onMounted | 组件挂载完成 |
beforeUpdate | onBeforeUpdate | 数据更新,虚拟 DOM 打补丁之前 |
updated | onUpdated | 数据更新,虚拟 DOM 渲染完成 |
beforeDestroy | onBeforeUnmount | 组件销毁之前 |
destroyed | onUnmounted | 组件销毁后 |
vue3.0的生命周期是从vue中到出,我们需要什么就引入什么。常用的生命周期是挂载相关的。这样会使得最终编译项目的体积减小。除set up之外,其他的生命周期函数都是在set up里面直接书写。
<template>
<div class="home">
计数器 >>> <span class="red">{{count}}</span> <br>
<button @click="countAdd">点击加数字</button>
</div>
</template>
<script>
// 你需要使用到什么生命周期,就引出来什么生命周期
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
ref
} from 'vue'
export default {
// setup 函数,就相当于 vue 2.0 中的 created
setup () {
const count = ref(0)
// 其他的生命周期都写在这里
onBeforeMount (() => {
count.value++
console.log('onBeforeMount', count.value)
})
onMounted (() => {
count.value++
console.log('onMounted', count.value)
})
onBeforeUpdate (() => {
console.log('onBeforeUpdate', count.value)
})
onUpdated (() => {
console.log('onUpdated', count.value)
})
onBeforeUnmount (() => {
count.value++
console.log('onBeforeUnmount', count.value)
})
onUnmounted (() => {
count.value++
console.log('onUnmounted', count.value)
})
// count++
const countAdd = () => {
count.value++
}
return {
count,
countAdd
}
}
}
</script>
初始:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov24lJde-1647775515837)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320190947050.png)]
点击加:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ki7qDxM3-1647775515838)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220320191116089.png)]
eturn {
count,
countAdd
}
}
}
初始:
[外链图片转存中...(img-ov24lJde-1647775515837)]
点击加:
[外链图片转存中...(img-Ki7qDxM3-1647775515838)]
后面继续更新...
标签:count,img,value,vue3.0,特性,防盗链,外链,图片 来源: https://blog.csdn.net/qq_42584734/article/details/123619221