vue3

介紹

1.性能的提升
    打包大小減少41%
    初次渲染快55%, 更新渲染快133%
    內(nèi)存減少54%
2.源碼的升級(jí)
    使用Proxy代替defineProperty實(shí)現(xiàn)響應(yīng)式
    重寫虛擬DOM的實(shí)現(xiàn)和Tree-Shaking
3.擁抱TypeScript
    Vue3可以更好的支持TypeScript
4.新的特性
    Composition API（組合API）
        setup配置
        ref與reactive
        watch與watchEffect
        provide與inject
    新的內(nèi)置組件
        Fragment
        Teleport
        Suspense
    其他改變
        新的生命周期鉤子
        data 選項(xiàng)應(yīng)始終被聲明為一個(gè)函數(shù)
        移除keyCode支持作為 v-on 的修飾符

5 組合式API和配置項(xiàng)API
  使用組合式API
  配置項(xiàng)API
  { name:'xx',
   data:function(){},
    methods:{}}

創(chuàng)建方式

1.方式一：vue-cli:創(chuàng)建vue2和vue3  
2.方式二：vite：創(chuàng)建vue3，創(chuàng)建最新
  2.1 命令：npm init vue@latest
  2.2 npm init vite-app <project-name>
  2.3 進(jìn)入項(xiàng)目目錄
      cd <project-name>
  2.4 安裝依賴
      npm install
  2.5 運(yùn)行
      npm run dev
注：vue3中的this不是vc對(duì)象 是一個(gè)代理對(duì)象

setup函數(shù)

1.vue 新增的setup配置項(xiàng)函數(shù)，
  在里面可以定義變量
  定義函數(shù)
  必須return 變量和函數(shù)，在模板中才能使用
2.代碼：
 2.1 組件
    <template>
      <h1>setup函數(shù)</h1>
      {{ name }}
      {{info}}
    <button @click="handleClick">點(diǎn)我</button>
    </template>
    <script>
    export default {
      name: "setup",
      setup(){
        let name='lili'
        let info={
          age:10
        }
        function handleClick(){
          alert('123')
        }
        return{
          name,handleClick,info
        }
      }
    }
    </script>
   2.2 app.vue
        <template>
        <handleSetUp></handleSetUp>
        </template>

        <script>
        import handleSetUp from "@/components/setUp.vue"
        export default {
          name: "setup",
          components:{
            handleSetUp
          }
        }
        </script>

ref和reactive

1.導(dǎo)入使用：import {ref, reactive} from 'vue'
2.ref：基本數(shù)據(jù)類型添加響應(yīng)式(動(dòng)態(tài)綁定)
  取值：在js中通過對(duì)象(RefImpl對(duì)象--定義的變量名).value
3.reactive：對(duì)象、數(shù)組使用
注：ref也可以使用在對(duì)象上--但是取值必須通過.value獲取
4.代碼：
  4.1 ref使用：
    <template>
      <h1>ref使用</h1>
      {{ name }}
      {{info.age}}
    <button @click="handleClick">點(diǎn)我姓名加？</button>
      <button @click="handleUp">點(diǎn)我年齡加1</button>
    </template>
    <script>
    import {ref, reactive} from "vue";
    export default {
      name: "setup",
      setup(){
        let name=ref('lili')
        let info=ref({
          age:10
        })
        function handleClick(){
          name.value=name.value+'?'
          console.log(name)
        }
        function handleUp(){
          info.value.age++
          console.log(info.value.age)
        }
        return{
          name,handleClick,info, handleUp
        }
      }
    }
    </script>
4.2 reactive使用：
    <template>
      <h1>reactive使用</h1>
      {{info.age}}
    <button @click="handleClick">點(diǎn)我姓名加？</button>
      <button @click="handleUp">點(diǎn)我年齡加1</button>
    </template>
    <script>
    import {ref, reactive} from "vue";
    export default {
      name: "setup",
      setup(){
          let info=reactive({
          age:10
        })
        function handleClick(){
          name.value=name.value+'?'
          console.log(name)
        }
        function handleUp(){
          info.age++
          console.log(info.age)
        }
        return{
          name,handleClick,info, handleUp
        }
      }
    }
    </script>

計(jì)算和監(jiān)聽屬性

計(jì)算屬性

<template>
{{person.FullName}}
</template>
<script>
import {ref, reactive, computed} from "vue"
export default {
  name: "計(jì)算屬性",
    //案例一
  // computed:{
  //   FullName:function (){}
  // },
  setup(){
    // let FirstName = ref('zhao')
    // let LastName = ref('qin')
    // let FullName = computed(()=>{
    //   return FistName.value + LastName.value
    // })
      //案例二
    let person = reactive({
      FirstName:'zhao',
      LastName:'qin'
    })
        person.FullName = computed({
      get() {
        return person.FirstName + '-' + person.LastName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.FirstName = nameArr[0]
        person.LastName = nameArr[1]
      }
    })
    return{
      person
    }
  }
}
</script>

監(jiān)聽屬性

1.監(jiān)聽屬性：watch、
<template>
{{name}}
</template>

<script>
import {ref,watch,watchEffect} from "vue";

export default {
  name: "監(jiān)聽屬性",
  setup(){
    let name=ref('lili')
     watch(name, (newValue, old) => {
      console.log('name變了')
     console.log(old)
      console.log(newValue)
    })
      //vue3 多的watchEffect,只要函數(shù)中使用的變量發(fā)生變化，它就會(huì)觸發(fā)
    watchEffect(() => {
      // 只要該函數(shù)中使用的變量發(fā)生變化，它就會(huì)觸發(fā)
      let a = name.value + '?'
      console.log('watchEffect配置的回調(diào)執(zhí)行了')
    })
    return {
      name
    }
  }
}
</script>

生命周期

1.Vue3.0中可以繼續(xù)使用Vue2.x中的生命周期鉤子，但有有兩個(gè)被更名：
    beforeDestroy改名為 beforeUnmount
    destroyed改名為 unmounted
2.Vue3.0也提供了 Composition API 形式的生命周期鉤子，與Vue2.x中鉤子對(duì)應(yīng)關(guān)系如下：
    beforeCreate===>setup()
    created=======>setup()
    beforeMount ===>onBeforeMount
    mounted=======>onMounted
    beforeUpdate===>onBeforeUpdate
    updated =======>onUpdated
    beforeUnmount ==>onBeforeUnmount
    unmounted =====>onUnmounted

hooks

1.什么是hook？
  本質(zhì)是一個(gè)函數(shù)，把setup函數(shù)中使用的Composition API進(jìn)行了封裝。
  類似于vue2.x中的mixin。
  自定義hook的優(yōu)勢(shì): 復(fù)用代碼, 讓setup中的邏輯更清楚易
2.代碼：
  2.1 hook(類似于父類)
        import {onMounted, onUnmounted, reactive} from "vue";
        export default function () {
            let p = reactive({
                x: 0,
                y: 0
            })
            function getPoint(event) {
                console.log(event)
                p.x = event.pageX
                p.y = event.pageY
            }
            // 聲明周期鉤子的onMounted，當(dāng)頁面掛載就會(huì)執(zhí)行
            onMounted(() => {
                // 給數(shù)鼠標(biāo)點(diǎn)擊增加監(jiān)聽，當(dāng)點(diǎn)擊鼠標(biāo)，就會(huì)執(zhí)行這個(gè)函數(shù)
                window.addEventListener('click', getPoint)
            })
            // 組件被銷毀時(shí)，把功能去掉
            onUnmounted(() => {
                window.removeEventListener('click', getPoint)
            })
            return p
        }
  2.2 在使用的組件中導(dǎo)入
    <template>
      <h2>x坐標(biāo)是：{{ p.x }},y坐標(biāo)是:{{ p.y }}</h2>
    </template>

    <script>
    import {reactive, onMounted, onUnmounted} from 'vue'
    import usePoint from '../hook/uesPoint.js'
    export default {
      name: "Point",
      setup() {
        let p = usePoint()
        return {p}
      }
    }
    </script>

toRefs

1.setup函數(shù)，return {...toRefs(data)}可以解壓復(fù)制
    export default {
      name: 'App',
      setup() {
        let data = reactive({
          name: 'liil',
          age: 19,
          isShow: true
        })

        function handleShow() {
          data.isShow = !data.isShow
          data.age++
        }
        return {
          ...toRefs(data),
          handleShow
          // data
        }
      }
    }

后臺(tái)管理模板

1.vue-admin-template-master
  package.json 第7行加入
  "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
2.java版的若依，帶權(quán)限控制的后臺(tái)管理模塊
3.python ：django-vue-admin   
4.python flask-vue-admin
5.go:gin-vue-admin