vue3.x新增特性

Posted 2021-06-10 ```飞翔的翅膀```

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