目录

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

image

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

image

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

到此咱的项目创建完成
image

或者新建运行项目窗口也可以的
Vue3从基础到精通-小白菜博客
运行之后的页面展示
image

cli和vite创建Vue项目的对比
image

三、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)
    })

六、生命周期钩子

首先咱来看看图解吧
Vue3从基础到精通-小白菜博客
几乎变化不大，
在Vue2的beforedestroy和destroyed
到了Vue3之后变成beforeMount和mounted