一、Vue3介绍

1、性能的提升

  • 打包大小减少41%
  • 初次渲染快55%,更新渲染快133%
  • 内存减少54%

2、源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

3、拥抱TypeScript

  • Vue3可以更好的支持TypeScript

4、新的特性

  Compostition 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:{}
        }

二、创建Vue3项目的两种方式

vue-cli:创建vue2和vue3(跟之前一样)

vite:创建vue3

  npm init vue@latest

vite创建另一种方式:创建vue3.0.4版本

  npm init vite-app <project-name>

进入工程目录

  cd <project-name>

安装依赖

  npm install

运行

  npm run dev

以后在页面中的this,已经不是vue2中的vc对象了,是一个代理对象

三、setup函数

vue 新增的setup配置项函数

  • 在里面可以定义变量
  • 定义函数
  • 必须要return 变量和函数,在模板中才能使用
<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <button @click="handleClick">点我看小姐姐</button>
  <br>
  <button @click="handleAdd">铁铁 点我,age+1</button>
</template>

<script>


export default {
  name: 'App',
  setup() {   // setup中没有this了
    // 以后所有的变量定义函数编写,都写在这个函数中
    // 定义变量 如果这么写,变量渲染没问题,但是没有响应式,页面变了,变量不会变
    let age = 19
    let name = 'lqz'
    // 定义函数
    function handleClick() {
      alert('嗨~小姐姐')
    }
    let handleAdd = () => {
      console.log('加加加')
      age=age+1
      console.log(age)
    }
    // 函数必须有返回值
    return {
      age, name, handleClick, handleAdd
    }

  }
}
</script>

四、ref和reactive

导入使用:import {ref,reactive} from 'vue'

基本数据类型(数字、字符串、布尔值)如果要加响应式:使用ref包裹,在模板中之间使用。js通过对象.value取值

对象、数组通过使用reactive,ref可以包对象类型,但是用的时候必须.value

<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <br>
  <button @click="handleAdd">点这点这,age+1</button>
  <br>
  <button @click="handleChangeName">点我看name变化</button>
</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    let age = ref(19) // age 已经不是数字了,是RefImpl的对象
    let name = ref('lqz')
    let handleAdd = () => {
      console.log('我要开始加了,age是', age)
      age.value = age.value + 1
      console.log('我要开始加了,age是', age.value)
    }
    function handleChangeName(){
      name.value=name.value+'?'
      console.log(name)
    }

    return {
      age, name, handleClick, handleAdd,handleChangeName
    }

  }
}
</script>

五、计算和监听属性

计算属性

export default {
  name: 'App',
  // computed:{
  //   fullName:function (){}
  // },
  setup() {
    // 1 计算属性案例1
    // let firstName = ref('张')
    // let lastName = ref('初安')
    // // 定义计算属性
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })

    // 2 计算属性案例2
    let person = reactive({
      firstName: '张',
      lastName: '初安',
    })
    // 定义计算属性
    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
    }


  }
}

监听属性

import {computed, watch, ref, reactive, watchEffect} from 'vue'

export default {
  name: 'App',
  setup() {
    // 1 计算属性案例1
    let name = ref('lqz')

    // 定义监听属性
    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
    }


  }
}

六、生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但是有两个被更名:

  • beforeDestroy改名为beforeUnmount
  • destroyed改名为unmounted

Vue3.0也提供了Composition API形式的生命周期钩子,与Vue.x中钩子对应关系如下:

beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted

七、hooks

什么是hooks?

本质是一个函数,把setup函数中使用的Composition API进行了封装

类似于vue2.x中的mixin

自定义hook的优势

  • 复用代码 让setup中的逻辑更清楚易懂

hook/usePoint.js

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
}

在想使用的组件中引入使用即可

 

<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>

<style scoped>

</style>

八、toRefs

setup函数,return{...toRefs(data)}可以解压赋值

export default {
  name: 'App',

  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19,
      isShow: true
    })

    function handleShow() {
      console.log('ssdaf')
      data.isShow = !data.isShow
      data.age++
    }

    return {
      ...toRefs(data),
      handleShow
      // data
    }

  }
}

九、后台管理模板

vue-admin-template-master

  -跑起来

  -package.json 第七行加入

"dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",

java版的若依,带权限控制的后台管理模块

python:django-vue-admin

python:flask-vue-admin

go:gin-vue-admin

原文地址:http://www.cnblogs.com/zzjjpp/p/16852093.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性