前端之Vue day08 Vue3项目搭建、setup、toRefs

一、Vue3 介绍

# 新项目使用vue3，有部分老项目使用vue2

# 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 的修饰符

# vue3的优点：

# 性能方面

    打包大小减少

    初次渲染快 , 更新渲染快

    内存减少

#源码方面

    移除一些冷门 API，比如 filter、inline-template 等，体积减少

    引入 tree-shaking 减少打包体积（通过编译阶段的静态分析，找到没有引入的模块并打上标记，并且移除）

    使用 Proxy 代替 defineProperty 实现响应式。

    Vue3 可以更好的支持 TypeScript

    Composition API（组合 API）可以按需使用，多余勾子配置不用再次打包。

 # 组合式API和配置项API

	vue2 ：配置项API

         new Vue({

             el:'#app',    // vue2是通过配置来写的，以k:value形式来写

             data:{}

         })

    vue3: 组合式API

        let name='lqz'

        let add=()=>{

        }

二、vue3创建项目

1.还是用vue-cli

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version

## 安装或者升级你的@vue/cli

npm install -g @vue/cli

## 创建

vue create vue_test

## 启动

cd vue_test

npm run serve

2.借助vite

vite官网：https://vitejs.cn

介绍：https://cn.vitejs.dev/guide/why.html#the-problems

什么是vite？—— 新一代前端构建工具。

优势如下：

开发环境中，无需打包操作，可快速的冷启动。

轻量快速的热重载（HMR）。

真正的按需编译，不再等待整个应用编译完成，当你访问什么他才编译哪个

使用步骤

# npm 6.x

$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线

$ npm init vite@latest <project-name> -- --template vue

去把依赖装好

$ cd <project-name>

$ cnpm install

$ npm run dev   ------启动项目

可以去package.json改

三、Setup的使用

Setup中没有this，使用变量直接使用



<template>

  <div class="home">

    <h3>setup的使用</h3>

    <p>姓名：{{name}}</p>

    <p>年龄：{{age}}</p>

    <br>

    <button @click="handleClick">点我</button>

    <button @click="handleAdd">点我年龄+1</button>

  </div>

</template>

<script>

export default {

  name:'HomeView',

  // 以后配置项api不建议用了，使用组合式api，最核心就是setup函数

  // 在setup里面写组合式api,setup 没有this了，使用 变量直接用就行了

  setup(){

    // 定义变量用let 常量用const

    let name = 'xiao'

    let age = 19

    let handleClick = () =>{

      alert('美女呀')

    }

    let handleAdd = () =>{

      age++

      console.log(age)

    }

    return {name,age,handleClick,handleAdd}

  }

}

</script>

Setup的响应式

因为作者的意图是，不想做响应式绑定的变量或者方法直接用就是，如果要做响应式，自己用ref 和reactive想绑定几个就绑定几个

如果要给变量（数字、字符串之类的）做响应式，就使用ref 包裹，修改的时候用.value修改

如果要给数组和对象类型做响应式，就使用reactive包裹，操作与读取数据均不需要.value

如果api混用，配置项api中，可以使用setup中定义的变量和函数，直接this点就是，不过setup没法用配置项api中定义的，官方不推荐混用



<template>

  <div class="home">

    <h3>setup的使用</h3>

    <p>姓名：{{name}}</p>

    <p>年龄：{{age}}</p>

    <br>

    <button @click="handleClick">点我</button>

    <button @click="handleAdd">点我年龄+1</button>

    <button @click="handleName">点我名字后面+?</button>

    <button @click="handleName2">点我名字2后面+?</button>

  </div>

</template>

<script>

import {ref,reactive} from 'vue'

export default {

  name:'HomeView',

  methods :{

    handleName2(){

      this.name = this.name + '?'

    }

  },

  // 以后配置项api不建议用了，使用组合式api，最核心就是setup函数

  // 在setup里面写组合式api,setup 没有this了，使用 变量直接用就行了

  setup(){

    // 定义变量用let 常量用const

    let name = ref('xiao')

    let age = ref(19)      // 以后变成了RefIml对象，真正的值在values中

    let userInfo = reactive({

      name :'韩立',

      gender:'男'

    })

    let handleClick = () =>{

      alert('仙师啊')

    }

    let handleAdd = () =>{

      age.value = age.value + 1

      console.log(age)

    }

    let handleName = () =>{

      name.value = name.value + '?'

      console.log(name)

    }

    return {name,age,handleClick,handleAdd,handleName,userInfo}

  }

}

</script>

总结：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

reactive定义的数据：操作数据与读取数据：均不需要.value

四、toRefs



import {toRefs, reactive} from 'vue'

# 以后setup的返回值可以直接使用

  setup() {

    let data = reactive({

      name: 'lqz',

      age: 19,

      gender: '男'

    })

    return {...toRefs(data)}

  }

# 以后在模板中直接用  {{name}} 不用再data.name

#其实......toRefs就是干了打散对象的数据解构赋值

五、Vue3的计算属性和监听属性

1.计算属性

vue3中，因为不用写配置项，要写个函数，这里还补充一下，计算属性可以也联动改变量值，用set方法

# computed 的配置项中的写法，不建议用了

	computed:{

        fullName(){

          return this.firstName+this.lastName

        }

      },

 # vue3 新写法

	let person = reactive({

      firstName: '',

      lastName: '',

    })

   let fullName = computed(() => {

    return person.firstName + person.lastName

    })

# 计算属性取值和修改值

    let fullName = computed({

      get() {

        return person.firstName + person.lastName

      },

      set(value) {

        person.firstName = value.slice(0, 1)

        person.lastName = value.slice(1)

      },

    })

2.监听属性

也很简单，不是写配置项的形式，写函数的形式，记得导入一下

vue3还提供了watchEffect ，也监听，只要里面的变量发生变化，他就触发执行

<template>

  <div class="home">

    <h1>监听属性</h1>

    {{ name }}----{{ age }}

    <button @click="handleChange">点我name+？</button>

    <button @click="age++">点我年龄+</button>

  </div>

</template>

<script>

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

export default {

  name: 'HomeView',

  setup() {

    let name = ref('lqz')

    let age = ref(10)

    // 只要name发生变化，就触发某个东西的执行

    watch(name, (newName, oldName) => {

      console.log('name变了')

      console.log('老的', oldName)

      console.log('新的', newName)

    })

    let handleChange = () => {

      name.value = name.value + '?'

    }

    // watchEffect vue3 提供的，它也做监听属性用，只要这个里面用的变量发生变化，他就会执行

    watchEffect(() => {

      console.log('xxxx')

      console.log(age.value)

    })

    return {name, handleChange, age}

  }

}

</script>

六、Vue3的生命周期

变化：

vue2	vue3
beforeCreate	beforeCreate
created	created
beforeMount	beforeMount
mounted	mounted
beforeUpdate	beforeUpdate
updated	updated
beforeDestroy	beforeUnmount
destroyed	unmounted

写法：

都需要从vue里面导一下

钩子	写法
beforeCreate	直接写setup()里面，写开头
created	直接写setup()里面，写开头
onBeforeMount	setup()里面，函数的写法
onMounted	setup()里面，函数的写法
onBeforeUpdate	setup()里面，函数的写法
onUpdated	setup()里面，函数的写法
onBeforeUnmount	setup()里面，函数的写法
onUnmounted	setup()里面，函数的写法

和后端交互

直接写在setup()开头就行，发axios

比如说：

setup(){

    let show = ref(false)

 axios.get('url').then(res=>{

     show.value=res.data.isShow

 })

}

七、Setup简洁用法

可以直接在script标签中加一个属性，这样在script中直接写变量，函数等等，连setu()都可以省略了，不用再return

如果是导组件，直接导，甚至不用再配component，被导的组件也不用再写导出配置

<template>

  <div class="home">

    {{ name }}--------{{ age }}

    <br>

    <hr>

    <button @click="handleClick">点我弹个窗</button>

  </div>

</template>

<script setup>

import {ref} from 'vue'

let name='jack'

let age=20

let handleClick=()=>{

    alert(name)

}

</script>

巴特西