vue3.0新增特性

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"  

1.4 vue3.x生命周期

vue3.x中的生命周期都会比vue2.x中早一点执行

beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount 挂载前
mounted	onMounted 挂在后
beforeUpdate	onBeforeUpdate 更新前
updated	onUpdated 更新后
beforeUnmount	onBeforeUnmount 卸载前
unmounted	onUnmounted 卸载后

<template>
  <div class="home">
    <p>{{msg}}</p>
    <button @click="changeMsg">修改msg</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from "vue";

export default defineComponent({
  name: "Home",
  props: {},
  setup(props, context) {
    console.log("3.0中的setup");
    onBeforeMount(() => {
      console.log("3.0中的onBeforeMount");
    });
    onMounted(() => {
      console.log("3.0中的onMounted");
    });
    onBeforeUpdate(() => {
      console.log("3.0中的onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("3.0中的onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("3.0中的onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("3.0中的onUnmounted");
    });
    let msg = ref("这里是子集组件");
    function changeMsg() {
      msg.value += 666;
    }

    return {
      msg,
      changeMsg
    };
  },
  beforeCreate() {
    console.log("2.x中的beforeCreate");
  },
  created() {
    console.log("2.x中的created");
  },
  beforeMount() {
    console.log("2.x中的beforeMount");
  },
  mounted() {
    console.log("2.x中的mounted");
  },
  beforeUpdate() {
    console.log("2.x中的beforeUpdate");
  },
  updated() {
    console.log("2.x中的updated");
  },
  // vue2.x中的beforeDestroy和destroyed这两个生命周期回调已经在vue3.0中改名了，所以不能再使用
  // beforeDestroy() {
  //   console.log("2.x中的beforeDestroy");
  // },
  // destroyed() {
  //   console.log("2.x中的destroyed");
  // }
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  }
});
</script>

vue3.x已经没有过滤器功能，但有自定义指令功能

如果详解了解vue3中哪个新添加，哪些废除参考：
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88

1.5 定义全局组件

在main.js中通过app.component创建全局组件

const app = createApp(App)

app.component('Dialog',Dialog)

1.6 全局变量

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.7 vue3的路由

安装vue-router：npm install vue-router@4
vue-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.8 vue3的vuex

安装：npm install vuex@next --save
vuex官方文档：https://next.vuex.vuejs.org/zh/index.html

store/index.js

import { createStore } from 'vuex'

export default createStore({
  //数据存储属性
  state: {
    num:0
  },
  //方法属性
  mutations: {
     MUTaddNum:function(state,params) {
       state.num += params.num;
    }
  },
  //异步属性
  actions: {
    ACTaddnum:function({commit},params){
      setTimeout(()=>{
        commit("MUTaddNum",params)
      },1000)
    }
  },
  //计算属性
  getters:{
    GETaddnum:function(state){
      return state.num += 20;
    }
  },
  modules: {
  }
})

组件中：

import { ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
  },
  setup() {
    const store = useStore();
    const state = store.state;
    const num = ref(0);
    function addNum() {
      // state
      // console.log(state.num);

      // mutations
      // store.commit("MUTaddNum",{num:1});
      // store.commit({type:"MUTaddNum",num:1});

      // actions
      // store.dispatch("ACTaddnum",{num:10});
      // store.dispatch({type:"ACTaddnum",num:10});

      // getters
      // num.value= store.getters.GETaddnum;
    }
    return {
      state,
      addNum,
      num,
    };
  },
};