vue3.0 和vue3.2的使用与区别

用户2689717763002
426 阅读5分钟

在vue3中我目前只接触了vue3.0与3.2这两个版本，而这两个版本虽然逻辑方式大同小异，但是的创建和代码写入方式却不同。 首先vue3.0的创建的方式是vue create 版本 项目名称 其写入代码的方式是

<template>
  <div class="home">
   <div>{{name}}</div> 
   <div>{{name1.uuname}}</div> 
   <div>{{uname}}</div> 
   <div>{{age}}</div> 
   <button @click="changeMyName">改变名字</button>
   <button @click="rouabout">跳转到about</button>
  </div>
</template>
<script>

import {ref,reactive,toRefs,onMounted} from "vue"
import {useRouter,useRoute} from "vue-router"
const changeNameWarpper=()=>{
   let name=ref("谭伟")
  const changeMyName=()=>{
    name.value="杜澳"
  }
  return{
    name,
    changeMyName
  }
}
export default {
  name: 'Home',
  components: {
    
  },
  setup(){
    let router=useRouter()
    //  let name=ref("谭伟")
     let name1=ref({uuname:"谭伟",age:24})
    let user=reactive({uname:"谭伟",age:34})
    // 相当于一个异步请求
    const rouabout=()=>{
      router.push({path:"/about",query:{id:0}})
    }
    setTimeout(()=>{
      //  name.value="杜澳"
     name1.value.uuname="dffsd"
     user=Object.assign(user,{uname:"杜澳",age:24})
      // user.uname="杜澳"
    },2000)
    
    onMounted(()=>{
      console.log("onMounted");
    })
    return{
      rouabout,
      // name,
    ...toRefs(changeNameWarpper()),
      name1,
      ...toRefs(user) ,
      onMounted
    }
  }
}
</script>

在写vue3.0的代码的时候我们不仅需要用import从vue中用大括号包裹的方式引入我们所需要的各种特殊代码比如ref,reactive,toRefs甚至各种生命周期也需要在其中引用。并且在需要跳转到其他页面时还需要用import从vue-router用大括号包裹的方式引入{useRouter,useRoute}并且还需要用定义一个变量将useRouter或useRoute用useRouter（）,useRoute（）方式赋值给我们定义的变量随后再用router.push({path:"/about",query:{id:0}})跳转及传参，另外虽然vue3.0与vue3.2定义事件和数据的方式大致一样，但是当时在vue3.0中定义数据和函数的方式有两种一种是在setup（）{return{}}之外定义函数并且在还需要在setup中的return中抛出，另一种则是将vue2中的data（）{retutn{}}变成setup（）{return{}}并且定义的事件只有想这样

setup(){
    let router=useRouter()
    //  let name=ref("谭伟")
     let name1=ref({uuname:"谭伟",age:24})
    let user=reactive({uname:"谭伟",age:34})
    // 相当于一个异步请求
    const rouabout=()=>{
      router.push({path:"/about",query:{id:0}})
    }
    setTimeout(()=>{
      //  name.value="杜澳"
     name1.value.uuname="dffsd"
     user=Object.assign(user,{uname:"杜澳",age:24})
      // user.uname="杜澳"
    },2000)
    
    onMounted(()=>{
      console.log("onMounted");
    })
    return{
      rouabout,
      // name,
    ...toRefs(changeNameWarpper()),
      name1,
      ...toRefs(user) ,
      onMounted
    }
  }

放在setup（）{return{}}才能发挥作用，并且在setup中定义的数据 还需要在setup中的return中抛出，否则则不起作用

而vue3.2的创建方式则是在vue3.0的基础上升级一下版本级别其审计的命令有两种，一种是npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2，另一种是yarn add vue@3.2.8 vue-router@4.0.11 vuex@4.0.2运用这两种命令请vue3.0升级成3.2版本其写入代码与使其发挥作用的方式也各不相同在vue3.2中我们不需要在像vue3.0中呢让将数据写入到setup中然后再在setup中的return中抛出，而只需要将其改写成这样

<script setup>

}
</script>

然后在其中定义数据或者函数，就可以让我们定义的函数与数据项vue3.0一样发挥作用，不必再进行抛出。
再者它们引入组件的方式也不同
vue3.0引入组件时不仅需要用import将组件引入进来，还需要将组件名放入component中才能起作用
而vue3.2则是只需要用import将组件引入进来即可。
以上就是我目前所了解的vue3.0与vue3.2的不同。

接下来我所的就是我所了解的vue3.0与vue3.2的共同之处
在定义数据的时候如果数据是基本数据类型就用ref()包裹数据,如果是浮躁数据类型就用reactive()包裹数据
在使用生命周期时也都需要在vue中引入之后以这种方式写入

onMounted(() => {

})

如果vue3.0或vue3.2要使用axios进行二次封装调用时，它们都需要设置untils然后在其中设置request.js文件在其中写入

import axios from "axios";
import qs from "qs";
import { ElNotification } from 'element-plus';
import router from '../router'
const instance = axios.create({
    baseURL: '/api',
    // timeout: 10000,
  });
// Add a request interceptor
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
       // 在发送请求之前做些什么
       config.data=(config.data instanceof FormData)?config.data:qs.stringify(config.data)
    return config;
  }, function (error) {
    // Do something with request error
    // 对请求错误做些什么
    return Promise.reject(error);
  });

  // 添加响应拦截器
// Add a response interceptor
instance.interceptors.response.use(function (response) {
    return response.status==200?response.data:response;
  }, function (error) {
 
    return Promise.reject(error);
  });
  export default instance

然后设置api文件夹之后设置api.js文件在其中引入untils文件夹中request.js文件 之后根据引入时的名字获取数据，比如这样

import axios from "../untils/request"
export function getUserList(data){
    return axios({
        method:"get",
        url:"/users/list",
        data
    })
}

之后在需要的页面引入api文件中的api.js文件其接收数据的名字都需要在用大括号帮助里面的名字也要与api文件中的名字相同，然后根据引入室的名字，比如

import { getUserList } from '@/api/index';
import { onMounted, reactive, getCurrentInstance, computed, ref } from 'vue';

onMounted(() => {
   getUserList(params).then(res => {
    console.log(res);
    let { data, total: t } = res;
    total.value = t;
    tableData.splice(0, tableData.length);
    Object.assign(tableData, data);

  }).catch(err => {

  })
  
})

而如果要是用状态管理工具存储数据时则都需要

import { createStore } from 'vuex'

export default createStore({
  state: {
    username:'admin'
  },
  mutations: {
    setName(state,val){
      state.username = val
    }
  },
  actions: {
    setNameAction({commit},val){
      commit('setName',val)
    }
  },
  modules: {
  }
})

在store文件中的 state: {},定义所要的数据之后在 mutations: {},中定义一个类似 setName(state,val){ state.username = val }的数据之后在 actions: {},中再定义一个类似 setNameAction({commit},val){ commit('setName',val) }的数据其中commit('setName',val)中的第一个参数的名字要与mutations中东一的函数名字相同，之后在需要的页面引入

import { useStore } from 'vuex';

之后这样写

// vuex 共享数据源
let store = useStore();

然后在需要的地方这样写

  store.dispatch('setNameAction', username)

其中第一个参数要与store中actions: {},我们所定义的函数的名字相同
而如果要让数据持久的化的话在都需要安装插件，命令则是npm i vuex-persistedstate -S之后就需要在store文件中用import引入数据其引入的数据就是 import createPersistedState from 'vuex-persistedstate'之后就是在store抛出的对象中写入这些代码

 plugins: [createPersistedState({
    key: 'myStore', // 存储在localStorage的key名，默认为vuex
    storage: window.localStorage
  })]

之后数据就会在我们在以类似store.dispatch('setNameAction', username)这种方法提交数据时以本地存储的方式存入浏览器中。
总的来说vue3.0与vue3.2的代码逻辑基本上是相同的，只是写入的方式不同以及vue3.2较与vue3.0更加简便而已。

avatar
文章
阅读
粉丝