vue3的创建

使用官方的vue-cli脚手架升级，可以查看官网(Vue CLI)

** 先把版本升级**

npm install -g @vue/cli\or\

yarn global add @vue/cli

之后用 vue create vue3 // 默认选择3.0版本创建就可以了

vue2语法用的是data，vue3则是使用setup()

<template>
   <div>
        <h1>
          {{name}}
        </h1>
   </div>
</template>

<script>
import {ref} from 'vue'
export default {
      name:'home',
   setup(){
         let name=ref('vue3')
         
         return{
          name
      }
   }
}
</script>

vue2中声明的变量需要在data中声明使用。而vue3则用ref，在return中返回出去才可以使用

然后就是vue2中修改变量要用到method，vue3则是用到了以下方法

<template>
    <div class="home">
       <div> {{name}}</div>
       <div>{{uname}}</div>
       <div>{{age}}</div>
   <button @click="changeMyName">修改</button>
   <button @click="changeMyUName">修改Uname</button>
   <button @click="toAbout">跳转到About</button>
    </div>
</template>

<script>
import {reactive, ref, toRefs,onMounted} from 'vue'
import { useRoute,useRouter} from 'vue-router'
const changNameWarpper=()=>{
      let name=ref('tanwei')
      const changeMyName=()=>{
        name.value='hahhaa'
      }
      const changeMyUName=()=>{
         userInfo.uname='修改后的U那么'
      }
      return{
       name,
       changeMyName
      }
}
export default {
   name:'home',

   setup(){
     let router=useRouter()
     let store=useRoute()

     let userInfo=reactive({uname:"弹走鱼尾纹",age:18})

     setTimeout(()=>{
       //如果想直接把后端请求过来的数据赋值给userInfo
       //需要用Object.assign去处理
        userInfo=Object.assign(userInfo,{uname:'新名字',age:19})
     },1000)

    onMounted(()=>{
      console.log("onMounted");
    })
     const toAbout=()=>{
       router.push({path:"/about",query:{id:"1"}})
     }
  
     return{
       ...toRefs(userInfo), //toRefs可以结构reactive对象的属性，转换成一个ref对象
       ...toRefs(changNameWarpper()),
       toAbout

     }
   }
}
</script>

• reactive 是用来声明对象，他声明的对象属性都是响应式的
• ref 通常用来声明基本数据类型或数组数据
• ref 声明的是个对象,值是value，使用时不用写，赋值需要写

vue2生命周期更新到vue3

• beforeCreate -> setup()

• created -> setup()

• beforeMount -> onBeforeMount

• mounted -> onMounted

• beforeUpdate -> onBeforeUpdate

• updated -> onUpdated

• beforeDestroy -> onBeforeUnmount

• destroyed -> onUnmounted

• errorCaptured -> onErrorCaptured

vue3对比vue2肯定是有不同之处

vue3 main.js中创建APP实例

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

onMounted和之前对比多了on

onMounted(()=>{ console.log("onMounted"); }) //详情上述修改method的代码中有

computed 计算属性

import { computed, ref } from 'vue';

const count = ref(1)
const user = computed(() => count.value + 1)； //此处不能直接++

console.log(user.value) // 2

##### 上述都是3.0的使用和对比2.0的不同之处，接下来我们了解3.0和3.2之间的区别

vue3.0升级到vue3.2 npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

style标签里可以用 v-bind

<template>
    <div>
       <div>{{ color }}</div>
       <button @click="color = color === 'red' ? 'green' : 'red'">按钮</button>
    </div>
</template>
<script setup>
    import { ref } from "vue"
    const color = ref("ref")
</script>
<style scoped>
    div{
        color: v-bind(color)
    }
</style>

可以直接使用 setup 语法糖,不必在return中返回出去

<template>
    <div>
       <div>{{ color }}</div>
    </div>
</template>
<script setup>
    import { ref } from "vue"
    const color = ref("ref")
</script>