Vue学习-07

标签：Vue 07 age value 学习 vue let setup name

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

标签：Vue,07,age,value,学习,vue,let,setup,name
From： https://www.cnblogs.com/zzjjpp/p/16852093.html