vue3.0学习相关网站
- 官网:https://vuejs.org/
- 中文官网:https://cn.vuejs.org/
- 中文官网vue3:https://v3.cn.vuejs.org/
vue3.0介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
2020年9月18日,vue3发布3.0版本,代号大海贼时代来临,One Piece
Vue3.0使用了 Typescript 进行了大规模的重构,带来了 Composition API RFC 版本,类似 React Hook 一样的写 Vue,可以自定义自己的 hooks
vue3.x相对于vue2.x的最新特性:
- 新增 组合式 API
- 更加接近原生js
- 按需加载
- 体积更小,速度更快;
- 解决遗留问题,更加强壮
接下里我们安装vue3 一起来看他的精彩之处吧
安装vue3
1 全局安装vue脚手架
npm i @vue/cli -g
2 创建一个项目
vue create 项目名称
3 在管理员中进行以下选择
建议使用vue3版本时VS code安装的插件
vue2与vue3的不同之处
- 启动方式不同(全局main.js中启动时)
vue2
启动方式
import Vue from 'vue'
new Vue({
store,
router,
render:h=>h(App)
}).$mount("#app")
vue3
启动
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")
- 挂载不同(全局挂载举例)
vue2
挂载
Vue.prototype.$say=function(msg){alert{msg}}
vue3
挂载
const app = createApp(App);
//定义vue3 的全局方法,config 配置,global 全局 Properties属性
app.config.globalProperties.$say = function (msg) {
alert(msg);
};
- 根节点不同
vue3
可以有多个根节点
vue2
有且只能一个根节点
- 生命周期的不同
v2
生命周期
<script>
beforeDestroy(){}
destroyed(){}
</script>
v3
生命周期
<script>
beforeUnmount() {
console.log("组件将要卸载")
},
unmounted() {
console.log("组件已经卸载")
}
}
</script>
新增 Composition API(组合式API)(较常用)
setup
函数
- setup是Vue3.0中一个新的额配置项,值为一个函数
- setup是所有Composition API(组合api)
- 组件中所用到的:数据、方法等等,均要配置在setup中
- setup函数的两种返回值:
若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。
若返回一个渲染函数:则可以自定义渲染内容。
<template>
<div>
<h1>setup</h1>
<button @click="num++">{{num}}</button> <br>
<stepper-com :value="num" @input="num=$event" ref="stepper"></stepper-com>
<p>{{size}}</p>
</div>
</template>
<script setup>
// 使用setup 可以简写(不用导出,组件不用注册了)
import StepperCom from '@/components/StepperCom.vue'
// 导入useWinSize方法
import {useWinSize} from '@/utils/utils.js'
import {ref,onMounted} from 'vue';
const num = ref(5);
const stepper = ref();
onMounted(() => {
console.log("组件已经挂载完毕")
// 组件挂载完毕引用steper组件
// stepper.value就是对stepper-com 组件的引用
console.log(stepper.value.count)
})
// 返回执行返回一个对象size
const size = useWinSize();
</script>
-
<script setup>
单文件组件 -
ref
响应式
创建值类型响应式数据方法
在seup内部需要 .value 来访问设置值 -
reactive
创建引用类型响应式数据方法 -
defineProps
定义 组传的传参props -
defineEmits
定义组件发送的事件 -
watch
监听一个数据的变化 -
watchEffect
监听多个数据 -
生命周期
setup中的生命周期,没有beforeCreate与created
setup的生命周期需要加on前缀
setup案例 代码
<template>
<span>
<button @click="count--">-</button>
<input type="text" style="width:90px" v-model="count">
<button @click="count++">+</button>
</span>
</template>
<script setup>
// dfineProps 定义props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
// 定义props传入参数
const props= defineProps({
// 类型为数字或者字符串,默认值为1
value:{type:[Number,String],default:1}
})
// 定义一个响应式对象初始值为 props.value
const count = ref(props.value)
// 定义事件发送器
var emits = defineEmits(["input"])
// 监听count的变化
watch(count,()=>{
// 发送一个input事件 事件的值为count的value
emits("input",count.value)
})
// 在watchEffect都会被自动监听,执行局回调函数
// 只要watchEffect中出现了数据,数据发生变化时候,
// 都会执行watchEffect
watchEffect(()=>{
count.value = props.value;
})
// defineExpose 规定了组件那些值可以被引用获取
defineExpose({count})
</script>
生命周期 案例代码
<template>
<div>
<h1>生命周期</h1>
<button @click="num++">{{num}}</button>
<button @click="setNum(num+5)">加5</button>
<p v-for="item in list" :key="item">{{item}}</p>
<input type="text" v-model="temp" @keyup.enter="addList()">
</div>
</template>
<script>
// ref 导入一个创建响应式 值类型数据的方法
// reactive 响应式 引用类型方法
import {
ref,
reactive
} from 'vue'
export default {
setup() {
// 创造一个响应式对象 num 默认值是5
const num = ref(5);
// 定义更新num的方法
function setNum(n) {
// 在setup 中num的值访问与赋值要加value 在template不需要
num.value = n;
}
// 返回num
// 定义一个响应式列表数据
var list = reactive(["Vue", "react", "Angular", "小程序"])
// 定义temp 临时数据
var temp = ref("");
// 定义添加list 的方法
function addList() {
// 注意值类型访问要加value
list.push(temp.value);
temp.value = "";
}
// 返回 定义的方法与数据
return {
num,
setNum,
list,
temp,
addList
};
},
beforeUnmount() {
console.log("组件将要卸载")
},
unmounted() {
console.log("组件已经卸载")
}
}
</script>
未完待续…