vue-07

vue3

介绍

1.性能的提升
    打包大小减少41%
    初次渲染快55%, 更新渲染快133%
    内存减少54%
2.源码的升级
    使用Proxy代替defineProperty实现响应式
    重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScript
    Vue3可以更好的支持TypeScript
4.新的特性
    Composition API（组合API）
        setup配置
        ref与reactive
        watch与watchEffect
        provide与inject
    新的内置组件
        Fragment
        Teleport
        Suspense
    其他改变
        新的生命周期钩子
        data 选项应始终被声明为一个函数
        移除keyCode支持作为 v-on 的修饰符

5 组合式API和配置项API
  使用组合式API
  配置项API
  { name:'xx',
   data:function(){},
    methods:{}}

创建方式

1.方式一：vue-cli:创建vue2和vue3  
2.方式二：vite：创建vue3，创建最新
  2.1 命令：npm init vue@latest
  2.2 npm init vite-app <project-name>
  2.3 进入项目目录
      cd <project-name>
  2.4 安装依赖
      npm install
  2.5 运行
      npm run dev
注：vue3中的this不是vc对象 是一个代理对象

setup函数

1.vue 新增的setup配置项函数，
  在里面可以定义变量
  定义函数
  必须return 变量和函数，在模板中才能使用
2.代码：
 2.1 组件
    <template>
      <h1>setup函数</h1>
      {{ name }}
      {{info}}
    <button @click="handleClick">点我</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.导入使用：import {ref, reactive} from 'vue'
2.ref：基本数据类型添加响应式(动态绑定)
  取值：在js中通过对象(RefImpl对象--定义的变量名).value
3.reactive：对象、数组使用
注：ref也可以使用在对象上--但是取值必须通过.value获取
4.代码：
  4.1 ref使用：
    <template>
      <h1>ref使用</h1>
      {{ name }}
      {{info.age}}
    <button @click="handleClick">点我姓名加？</button>
      <button @click="handleUp">点我年龄加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">点我姓名加？</button>
      <button @click="handleUp">点我年龄加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>

计算和监听属性

计算属性

<template>
{{person.FullName}}
</template>
<script>
import {ref, reactive, computed} from "vue"
export default {
  name: "计算属性",
    //案例一
  // 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>

监听属性

1.监听属性：watch、
<template>
{{name}}
</template>

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

export default {
  name: "监听属性",
  setup(){
    let name=ref('lili')
     watch(name, (newValue, old) => {
      console.log('name变了')
     console.log(old)
      console.log(newValue)
    })
      //vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
    watchEffect(() => {
      // 只要该函数中使用的变量发生变化，它就会触发
      let a = name.value + '?'
      console.log('watchEffect配置的回调执行了')
    })
    return {
      name
    }
  }
}
</script>

生命周期

1.Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
    beforeDestroy改名为 beforeUnmount
    destroyed改名为 unmounted
2.Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
    beforeCreate===>setup()
    created=======>setup()
    beforeMount ===>onBeforeMount
    mounted=======>onMounted
    beforeUpdate===>onBeforeUpdate
    updated =======>onUpdated
    beforeUnmount ==>onBeforeUnmount
    unmounted =====>onUnmounted

hooks

1.什么是hook？
  本质是一个函数，把setup函数中使用的Composition API进行了封装。
  类似于vue2.x中的mixin。
  自定义hook的优势: 复用代码, 让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，当页面挂载就会执行
            onMounted(() => {
                // 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
                window.addEventListener('click', getPoint)
            })
            // 组件被销毁时，把功能去掉
            onUnmounted(() => {
                window.removeEventListener('click', getPoint)
            })
            return p
        }
  2.2 在使用的组件中导入
    <template>
      <h2>x坐标是：{{ p.x }},y坐标是:{{ 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函数，return {...toRefs(data)}可以解压复制
    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
        }
      }
    }

后台管理模板

1.vue-admin-template-master
  package.json 第7行加入
  "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
2.java版的若依，带权限控制的后台管理模块
3.python ：django-vue-admin   
4.python flask-vue-admin
5.go:gin-vue-admin