Vue3-入门 拿来吧你!

Vue3 简介

1. 了解相关信息

• vue.js 3.0 它支持vue 2.0 的大多数特性
• 更好的支持 TypeScript

2. 性能提升

• 减小打包的数据占用空间
• 渲染更快速
• 内存减少
• 使用 Proxy 代替 defineProperty 实现数据响应式
• 重写虚拟 DOM 的实现和 Tree-Shaking

3.新增特性

• Composition(组合)API

• setup

  • ref 和 reactive
  • computed 和 watch
  • 新增的生命周期钩子函数
  • provide 与 inject
  • 等等

• 新组件

  • Fragment - 文档碎片
  • /Teleport - 瞬移组件的位置
  • Suspense - 异步加载组件的 loading 界面

• 其它 API 更新

  • 全局 API 的修改
  • 将原来的全局 API 转移到应用对象
  • 模板语法变化

创建Vue3项目有两种方式

1.可以使用vue-cli

2.可以使用vite

vue3 部分源码解析

<template>
	<!-- vue2 中的html 模板中必须有一个根标签,vue3 组件的html 模板中可以没有根标签 -->
	<img alt="vue logo" src="./assets/logo.png">
	<!-- 使用这个子级组件 -->
	<Helloworld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script>
	//这里可以使用ts的代码
	//defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
	import { defineComponent } from 'vue';
	//引入一个子级组件
	import HelloWorld from "./components/HelloWorld.vue"
	//暴露出去一个定义好的组件
	export default defineComponent({
		// 当前组件的名字是App
		name:"App",
		components:{
			// 注册一个子组件
			HelloWorld
		}
	});
</script>
<style>
	#app{
		// 写全局样式
	}
</style>

Composition API(常用部分1.2.3)

1.setup 初了解

很简单,很明了

• 新的option , 所有的组合API函数都在此使用,只在初始化时执行一次
• 函数如果返回对象,对象中的属性或方法,模板中可以直接使用

2.ref

• 作用: 定义一个数据的响应式
• 语法: const xxx = ref(initValue):
  • 创建一个包含响应式数据的引用(reference)对象
  • js 中操作数据: xxx.value
  • 模板中操作数据: 不需要.value
• 一般用来定义一个基本类型的响应式数据

<template>
  <h2>{{ count }}</h2>
  <hr />
  <button @click="update">更新</button>
</template>
<script>
import { ref } from 'vue'
export default {
  /* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
  // data () {
  //   return {
  //     count: 0
  //   }
  // },
  // methods: {
  //   update () {
  //     this.count++
  //   }
  // }
  /* 使用vue3的composition API */
  setup() {
    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)
    // 更新响应式数据的函数
    function update() {
      // alert('update')
      count.value = count.value + 1
    }
    return {
      count,
      update
    }
  }
}
</script>

3. reactive

• 作用: 定义多个数据的响应式
• const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<template>
  <h2>name: {{ state.name }}</h2>
  <h2>age: {{ state.age }}</h2>
  <h2>wife: {{ state.wife }}</h2>
  <hr />
  <button @click="update">更新</button>
</template>
<script>
/*
reactive:
    作用: 定义多个数据的响应式
    const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
    响应式转换是“深层的”：会影响对象内部所有嵌套的属性
    内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
*/
import { reactive } from 'vue'
export default {
  setup() {
    /*
    定义响应式数据对象
    */
    const state = reactive({
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      }
    })
    console.log(state, state.wife)
    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }
    return {
      state,
      update
    }
  }
}
</script>