vue3.x新增特性
Posted ```飞翔的翅膀```
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.x新增特性相关的知识,希望对你有一定的参考价值。
1.vue3.x新增特性
1.1 vue3.x相关资源
vue3.x官方仓库:https://github.com/vuejs/vue-next
vue3.x中文官方文档:https://v3.cn.vuejs.org/
vue-cli官方仓库:https://github.com/vuejs/vue-cli
vue-cli官方文档:https://cli.vuejs.org/zh/
1.2 创建vue3.x项目方式
主流创建vue3项目方式:
1.vue-cli 脚本架的版本至少>=@vue/cli 4.5.0
vue create v3_01
? Please pick a preset: Manually select features
? Check the features needed for your project:
❯◉ Choose Vue version //选择vue的版本
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
2.vite
vite是一个前端构建工具
速度秒开
vite内核基于rollup构建项目
vite使用原生ES module模块系统生成文件
基于vite的vue创建项目步骤:
第一步:npm init @vitejs/app 项目名称
选择vue还是React
选择语言:javascript还是typescript
第二步:进入创建的目录并运行
进入目录: cd 项目名称目录
运行项目: npm run dev
1.3 vue3.x响应式
-
reactive
记住:reactive必须写在setup函数中 const data = reactive( index: 1, title:'我是标题', arr:[ id:1001,name:'ipad2',price:2200, id:1002,name:'ipad3',price:2210, id:1003,name:'ipad4',price:2240, id:1004,name:'ipad5',price:2260, ] ); 修改某个data的某个属性可以像对象一个样直接修改: data.title='要修改的值'
如果reactive中的对象属性很多时,通过return 返回到页面上比较麻烦,可以通过…toRefs(data)来解构,然后可以直接使用对象中的属性名在模板中直接渲染
-
ref:单值响应
//设置book变量为响应式
let book=ref(‘javaScript权威指南’)//通过.value来修改ref设置的响应式变量 book.value="hahahahahha"
-
计算属性
let doubleValue=computed(()=>data.index*2)
1.4 vue3.x生命周期
vue2.x 生命周期 vue3.x生命周期,并且只能在setup中使用
beforeCreate 不需要
created 不需要
beforeMount onBeforeMount 挂载前
mounted onMounted 挂载后
beforeUpdate onBeforeUpdate 更新前
updated onUpdated 更新后
beforeUnmount onBeforeUnmount 卸载前
unmounted onUnmounted 卸载后
1.5 获取DOM元素 ref
第一步:模板中添加ref属性
<p ref='shu'>图书: book </p>
第二步:创建一个值为null的ref单值响应
let shu=ref(null);
第三步:在setup中return 返回
//必须要通过return 一个对象,才能在模板上响应
return
shu,
;
vue3.x已经没有过滤器功能,但有自定义指令功能
如果详解了解vue3中哪个新添加,哪些废除参考:
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88
1.6 定义全局组件
在main.js中通过app.component创建全局组件
const app = createApp(App)
app.component('Dialog',Dialog)
1.7 全局变量
vue2.x main.js
Vue.prototype.$http=axios
//其他组件中。。
this.$http
vue3.x如何设置
在main.js中添加:
//创建全局变量
app.config.globalProperties.自定义属性='值'
//其他组件中
setup(props)
const ctx=getCurrentInstance();
console.log('k:',ctx.jiyun)
1.8 vue3的路由
安装vue-router:npm install vue-router@4vue-router官方文档:https://next.router.vuejs.org/zh/introduction.html第一步:创建一个router目录,并在其中创建index.js文件,路由代码配置: import createRouter, createWebHashHistory, createWebHistory from 'vue-router' const Home=()=>import('../views/home/index.vue') const Dialog=()=>import('../components/dialog.vue') //路由配置 const routes = [ path:'/',redirect: '/home', path:'/home',component:Home, path:'/dialog',name:'dialog',component:Dialog, ] const router = createRouter( //指定路由模式 history: createWebHashHistory(), //路由配置 routes ) export default router; 其中: createRouter:创建路由 createWebHashHistory:路由模式中的hash模式 createWebHistory:路由模式中的history模式 第二步:在main.js中引入router,并注册 import router from './router' app.use(router)
1.9 vue3的vuex
安装:npm install vuex@next --savevuex官方文档:https://next.vuex.vuejs.org/zh/index.html
以上是关于vue3.x新增特性的主要内容,如果未能解决你的问题,请参考以下文章