Vue3从基础到精通

目录

• 一、Vue3介绍
  • 1. Vue3的变化
  • 2. Vue2和Vue3的不同之处
• 二、Vue3创建项目
  • 1.用vue-lci创建步骤
  • 2.用vite创建步骤
• 三、setup函数
• 四、ref、reactive、toRefs
• 五、计算属性和监听属性
  • 1.计算属性
  • 2.监听属性
• 六、生命周期钩子

一、Vue3介绍

1. 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
5. 新的内置组件：Fragment、Teleport、Suspense
6. 新的声明周期钩子
7. data选项应始终被声明为一个函数移除keyCode支持作为v-on的修饰符

2. Vue2和Vue3的不同之处

• Vue2：配置项API

用Vue2写代码

new vue ({
	el:'#app',
	data:{},
	methods:{}
})

• Vue3：组合式API

用Vue3写代码

let name = 'mire'
let add = ()=>{

}

二、Vue3创建项目

1.用vue-lci创建步骤

更多详细讲解请戳这里：官方文档

跟创建Vue2的步骤一模一样！

更多详细讲解请戳这里：Vue-cli创建Vue项目

2.用vite创建步骤

vite是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！要使用 Vite 来创建一个 Vue 项目，非常简单，更多细节请戳>>>:新的构建前端项目工具vite官网构建项目最大优势就是快、极快，快的原因是：构建项目时没有下node-modules包，所以创建完之后还是要窒息cnpm install

具体步骤如下

# win+R输入cmd,进入终端，切换盘符到D盘
D:

cnpm init vue@latest

# 切换到项目目录(pycharm终端)执行以下代码下载依赖
cnpm install

# 运行项目需要在terminal执行以下代码
npm run dev

到此咱的项目创建完成

或者新建运行项目窗口也可以的



运行之后的页面展示

cli和vite创建Vue项目的对比

三、setup函数

基础代码写法如下

点击查看代码

<template>
  <div class="home">
    <h1>setup的使用</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <br>
    <button @click="handleClick">点我看美女</button>
    <button @click="handleAdd">点击年龄+1</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',

    let name = '米热'
    let age = 18
    let handleClick = () => {
      alert('美女')
    }
    let handleAdd = () => {
      age++
      console.log(age)
    }

    return {name, age, handleClick, handleAdd}
  }
}
</script>

tips:

• 以后配置项api不建议用了，使用组合式api，最核心就是setup函数
• 在setup里面写组合式api,setup 没有this了，使用 变量直接用就行了
• 以后定义变量 使用let，定义常量使用const，尽量不使用var
• 最后定义的变量和方法都要return
• 但是失去了响应式，不过我们的ref、reactive、toRers可以解决此问题

四、ref、reactive、toRefs

ref、reactive使用方法如下

点击查看代码

<template>
  <div class="home">
    <h1>ref和reactive的使用</h1>
    <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>
    <hr>
    {{ userInfo.name }}------ {{ userInfo.gender }}
    <button @click="handleChange">点击修改性别</button>
  </div>
</template>

<script>
import {ref, reactive} from 'vue'

export default {
  name: 'HomeView',
  methods: {
    handleName2() {
      this.name = this.name + '?'
    }
  },
  setup() {
    let name = ref('米热')
    let age = ref(18)
    let userInfo = reactive({
      name: '米热',
      gender: '女'
    })
    let handleClick = () => {
      alert('美女')
    }
    let handleAdd = () => {
      age.value = age.value + 1  // 以后再改，必须用 xx.value改值
      console.log(age)
    }
    let handleChange = () => {
      console.log(userInfo)
      userInfo.gender = '未知'
    }

    let handleName = () => {
      name.value = name.value + '?'
      console.log(name)
    }

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

  }
}
</script>

tips:

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

toRefs使用方法如下

点击查看代码

  setup() {
    let data = reactive({
      name: 'mire',
      age: 18,
      gender: '女'
    })
    return {...toRefs(data)}
  }

tips:

• 以后setup的返回值可以直接使用
• 以后在模板中直接用 {{name}}

五、计算属性和监听属性

1.计算属性

点击查看代码

let person = reactive({
   firstName: '',
   lastName: '',
  })
  let fullName = computed(() => {
    return person.firstName + person.lastName
  })

2.监听属性

点击查看代码

# 组合式api写法，只要name发生变化，就会触发匿名函数执行
   let name = ref('lqz')
   watch(name, (newName, oldName) => {
      console.log('name变了')
      console.log('老的', oldName)
      console.log('新的', newName)
    })

# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
    watchEffect(() => {
      console.log(age.value)
    })

六、生命周期钩子

首先咱来看看图解吧



几乎变化不大，

在Vue2的beforedestroy和destroyed

到了Vue3之后变成beforeMount和mounted