Vue3.0正式版在去年9月18号发布，3.0版本的官网是全英文的 cli.vuejs.org/zh/guide/ ，Vue3.0版本对于Node版本也是有要求的，必须是8.9或更高版本（推荐使用8.11.0版本）
Vue3.0的优势
- 按需编译，压缩包体积更小
- 编译速度更快，比Vue2.0快1.2~2倍
- 运用了Composition API（组合API）
- 加强了对于Ts的支持
- 暴露了自定义渲染API
安装Vue3.0的项目
我们可以在安装Vue3.0项目之前查看node.js的版本，在cmd中执行node -v
开始安装
在cmd中执行 vue create 项目名称，并选择 Manually select features回车
选择相关依赖
空格选择，选择完成之后，回车提交
选择版本
创建完成
Vue3.0新特性
setup
此方法在组件初始化构造的时候触发，此方法内部定义的变量或函数必须return，setup里面是没有this的，this是undefined
<template>
<div id="nav">
{{novel}}
</div>
</template>
<script>
export default {
setup(){
const novel = '笨鸟';//定义常量
return {
novel
}
}
}
</script>
v-model（双向数据绑定）
在Vue2.x中通过defineProperty来实现响应式数据的，Vue3.x中是通过Proxy来实现响应式数据的
自定义双向绑定的数据，之前的2.0版本所有变量都是双向绑定的，在3.0版本中可以选择性的对数据进行设置双向绑定，和Element-ui组件库的按需引入有异曲同工之处，大大缩小了包的体积。
<template>
<div id="nav">
<p>{{novel}}</p>
<p>{{obj}}</p>
<p><button @click="changeFun">点击改变</button></p>
</div>
</template>
<script>
import { reactive, ref } from 'vue';//在vue中引入并解析出ref和reactive
export default {
setup(){
let novel = ref('笨鸟');//基本数据类型使用ref
let obj = reactive({name:'笨鸟'})//复杂数据类型使用reactive
const changeFun = ()=>{
novel.value = '111';
}
return {
novel,
obj,
changeFun
}
}
}
</script>
readonly
在3.0版本中可以给数据设置只读属性
<template>
<div id="nav">
<p>{{novel}}</p>
</div>
</template>
<script>
import { readonly } from '@vue/reactivity';
export default {
setup(){
let novel = readonly('笨鸟');//给novel设置只读
setTimeout(() => {
novel.value='我的'//改变novel值
}, 200);
return {
novel,
}
}
}
</script>
会出现以下情况
今天主要就更新到这里啦。
