vue3的基本使用(超详细)

Posted 2023-01-13 luofei_create

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue3的基本使用(超详细)相关的知识，希望对你有一定的参考价值。

一、初识vue3

1.vue3简介

2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece
特点：
- 无需构建步骤，渐进式增强静态的 html
- 在任何页面中作为 Web Components 嵌入
- 单页应用 (SPA)
- 全栈 / 服务端渲染 (SSR)
- Jamstack / 静态站点生成 (SSG)
- 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

2.Vue3带来了什么

打包大小减少40%
初次渲染快55%，更新渲染快133%
内存减少54%

3.分析目录结构

main.js中的引入
在模板中vue3中是可以没有根标签了，这也是比较重要的改变
应用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。

//main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import createApp from 'vue
import App from './App.vue

//创建应用实例对象-app(类似于之前vue2中的vm实例，但是app比vm更轻)
createApp(APP).mount('#app')
//卸载就是unmount,卸载就没了
//createApp(APP).unmount('#app')



//之前我们是这么写的，在vue3里面这一块就不支持了，会报错的，引入不到 import vue from 'vue'; 
new Vue(
	render:(h) => h(App)
).$mount('#app')



//多个应用实例
const app1 = createApp(
  /* ... */
)
app1.mount('#container-1')

const app2 = createApp(
  /* ... */
)
app2.mount('#container-2')

安装vue3的开发者工具

方式一：打开chrome应用商店，搜索vue：里面有个Vue.js devtools，且下面有个角标beta那个就是vue3的开发者工具
方式二：离线模式下，可以直接将包丢到扩展程序

二、常用Composition API（组合式API）

1. setup函数

理解：Vue3.0中一个新的额配置项，值为一个函数
2.setup是所有Composition API(组合api) “表演的舞台”
组件中所用到的：数据、方法等等，均要配置在setup中
setup函数的两种返回值:
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注）
- 若返回一个渲染函数：则可以自定义渲染内容。
注意点：
- 尽量不要与Vue2.x配置混用
  - Vue2.x配置（data ,methos, computed…）中访问到setup中的属性，方法
  - 但在setup中不能访问到Vue2.x配置（data.methos,compued…）
  - 如果有重名，setup优先
- setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性

import h from 'vue'
//向下兼容，可以写入vue2中的data配置项
module default 
	name: 'App',
	setup()
		//数据
		let name = '张三',
		let age = 18,
		//方法
		function sayHello()
			console.log(name)
		,

		//f返回一个对象（常用）
		return 
			name,
			age,
			sayHello
		
		
		//返回一个函数（渲染函数）
		//return () => return h('h1','学习') 
		return () => h('h1','学习')

1.1关于单文件组件`<script setup></script >`

每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>)
这个脚本块将被预处理为组件的 setup() 函数，这意味着它将为每一个组件实例都执行。<script setup> 中的顶层绑定都将自动暴露给模板。
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：
- 更少的样板内容，更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和自定义事件。这个我下面是有说明的
- 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
- 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

（1）基本语法：

/* 里面的代码会被编译成组件 setup() 函数的内容。
  这意味着与普通的 `<script>` 只在组件被首次引入的时候执行一次不同，
  `<script setup>` 中的代码会在每次组件实例被创建的时候执行。*/
<script setup>
	console.log('hello script setup')
</script>

顶层的绑定会被暴露给模板

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用：

<script setup>
// 变量
const msg = '王二麻子'

// 函数
function log() 
  console.log(msg)

</script>

<template>
  <button @click="log"> msg </button>
</template>

import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 action 函数，而不需要通过 methods 选项来暴露它：

<script setup>
import  say  from './action'
</script>

<template>
  <div> say ('hello') </div>
</template>

（2）响应式：

响应式状态需要明确使用响应式 API 来创建。和 setup() 函数的返回值一样，ref 在模板中使用的时候会自动解包：

<script setup>
import  ref  from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++"> count </button>
</template>

（3）使用组件：

<script setup> 范围里的值也能被直接作为自定义组件的标签名使用：

/**
*这里 MyComponent 应当被理解为像是在引用一个变量。
*如果你使用过 JSX，此处的心智模型是类似的。
*其 kebab-case 格式的 <my-component> 同样能在模板中使用——不过，
*强烈建议使用 PascalCase 格式以保持一致性。同时这也有助于区分原生的自定义元素。
*/
<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

动态组件

/**
*由于组件是通过变量引用而不是基于字符串组件名注册的，
*在 <script setup> 中要使用动态组件的时候，应该使用*动态的 :is 来绑定：
*/
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

递归组件

一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 FooBar.vue 的组件可以在其模板中用 <FooBar/> 引用它自己。
注意这种方式相比于导入的组件优先级更低。如果有具名的导入和组件自身推导的名字冲突了，可以为导入的组件添加别名：

import  FooBar as FooBarChild  from './components'

命名空间组件

可以使用带 . 的组件标签，例如 <Foo.Bar> 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

（4）使用自定义指令：

全局注册的自定义指令将正常工作。本地的自定义指令在 <script setup> 中不需要显式注册，但他们必须遵循 vNameOfDirective 这样的命名规范：

<script setup>
const vMyDirective = 
  beforeMount: (el) => 
    // 在元素上做些操作
  

</script>
<template>
  <h1 v-my-directive>This is a Heading</h1>
</template>

如果指令是从别处导入的，可以通过重命名来使其符合命名规范：

<script setup>
import  myDirective as vMyDirective  from './MyDirective.js'
</script>

（5）defineProps() 和 defineEmits()：

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：

<script setup>
const props = defineProps(
  foo: String
)
const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。
defineProps 和 defineEmits 在选项传入后，会提供恰当的类型推导。
传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。

（5）defineExpose：

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

//可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：
<script setup>
import  ref  from 'vue'

const a = 1
const b = ref(2)
defineExpose(
  a,
  b
)
</script>

//当父组件通过模板引用的方式获取到当前组件的实例，
//获取到的实例会像这样  a: number, b: number  (ref 会和在普通实例中一样被自动解包)

（6）useSlots() 和 useAttrs()：

在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 和 useAttrs 两个辅助函数：

<script setup>
import  useSlots, useAttrs  from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>
//useSlots 和 useAttrs 是真实的运行时函数，它的返回与 setupContext.slots 和 setupContext.attrs 等价。
//它们同样也能在普通的组合式 API 中使用。

（7）与普通的 `<script>` 一起使用：

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

声明无法在

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()

// 声明额外的选项
export default 
  inheritAttrs: false,
  customOptions: 

</script>

<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

（8）顶层 await：

<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()：

<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
// 另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

2.ref 函数

作用：定义一个响应式的数据
语法： const xxx = ref(initValue)
- 创建一个包含响应式数据引用对象（reference对象）
- JS中操作数据：xxx.value
- 模板中读取数据：不需要.value，直接： xxx
备注：
- 接收的数据可以是：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然靠的是Object.defineProperty()的get和set完成的
- 对象类型的数据：内部”求助“了Vue3.0中的一个新的函数——reactive函数

3.reactive 函数

作用：定义一个对象类型的响应式数据（基本类型别用他，用ref函数）
语法：const 代理对象 = reactive(被代理对象)接收一个对象（或数组）,返回一个代理对象（proxy对象）
reactive定义的响应式数据是”深层次的“
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

4.Vue3.0中响应式原理

先来看一看vue2的响应式原理
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

Object.defineProperty( data, 'count', 
	get(),
	set()
)

//模拟实现一下
let person = 
	name: '张三',
	age: 15,

let p = 
Object.defineProperty( p, 'name', 
	configurable: true, //配置这个属性表示可删除的，否则delete p.name 是删除不了的 false
	get()
		//有人读取name属性时调用
		return person.name
	,
	set(value)
		//有人修改时调用
		person.name = value
	
)

存在问题：
1. 新增属性。删除属性。界面不会更新
2. 直接通过下表修改数组，界面不会自动更新

vue3的响应式
- 实现原理:
  - 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等等。
  - 通过Reflect（反射）：对被代理对象的属性进行操作
  - MDN文档中描述的Proxy与Reflect：可以参考对应的文档

//模拟vue3中实现响应式
let person = 
	name: '张三',
	age: 15,

//我们管p叫做代理数据，管person叫源数据
const p = new Proxy(person,
	//target代表的是person这个源对象，propName代表读取或者写入的属性名
	get(target,propName)
		console.log('有人读取了p上面的propName属性')
		return target[propName]
	,
	//不仅仅是修改调用，增加的时候也会调用
	set(target,propName,value)
		console.log(`有人修改了p身上的$propName属性，我要去更新界面了`)
		target[propName] = value
	,
	deleteProperty(target,propName)
		console.log(`有人删除了p身上的$propName属性，我要去更新界面了`)
		return delete target[propName]
	
)
//映射到person上了，捕捉到修改，那就是响应式啊

//vue3底层源码不是我们上面写的那么low，实现原理一样，但是用了一个新的方式
window.Reflect
![Reflect的写法](https://img-blog.csdnimg.cn/565f96b1be74435cacbc42e06706791d.png)

let obj = 
	a: 1,
	b:2,

//传统的只能通过try catch去捕获异常，如果使用这种那么底层源码将会有一堆try catch
try
	Object.defineProperty( obj, 'c', 
		get() return 3 ,
	)
	Object.defineProperty( obj, 'c', 
		get() return 4 ,
	)
 catch(error) 
	console.log(error)


//新的方式： 通过Reflect反射对象去操作，相对来说要舒服一点，不会要那么多的try catch
const x1 = Reflect.defineProperty( obj, 'c', 
		get() return 3 ,
)
const x2 = Reflect.defineProperty( obj, 'c', 
		get() return 3 ,
)
//x1,和x2是有返回布尔值的
if(x2)
	console.log('某某操作成功了')
else 
	console.log('某某操作失败了')

所以vue3最终的响应式原理如下：

let person = 
	name: '张三',
	age: 15,

//我们管p叫做代理数据，管person叫源数据
const p = new Proxy(person,
	//target代表的是person这个源对象，propName代表读取或者写入的属性名
	get(target,propName)
		console.log('有人读取了p上面的propName属性')
		return Reflect.get(target, propName)
	,
	//不仅仅是修改调用，增加的时候也会调用
	set(target,propName,value)
		console.log(`有人修改了p身上的$propName属性，我要去更新界面了`)
		Reflect.set(target, propName, value)
	,
	deleteProperty(target,propName)
		console.log(`有人删除了p身上的$propName属性，我要去更新界面了`)
		return Reflect.deleteProperty(target,propName) 
	
)

5.reactive对比ref

从定义数据角度对比：
- ref用来定义： 基本数据类型
- reactive用来定义： 对象（或数组）类型数据
- 备注： ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
从原理角度对比：
- ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
- reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
从使用角度对比：
- ref定义数据：操作数据需要 .value ,读取数据时模板中直接读取不需要 .value
- reactive 定义的数据：操作数据和读取数据均不需要 .value

5.setup的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined
- setup的参数
  - props:值为对象，包含：组件外部传递过来，且组件内部声明接收了属性
  - context：上下文对象
    - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于 this.$attrs
    - slots:收到插槽的内容，相当于$slots
    - emit: 分发自定义事件的函数，相当于this.$emit

//父组件
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/test3.vue';
const hello = (val) =>
  console.log('传递的参数是：'+ val);

</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="传递吧" @hello="hello">
    <template v-slot:cacao>
      <span>是插槽吗</span>
    </template>
    <template v-slot:qwe>
      <span>meiyou</span>
    </template>

  </HelloWorld>
</template>

//子组件
export default 
    name: 'test3',
    props: ['msg'],
    emits:['hello'],
    //这里setup接收两个参数，一个是props，一个是上下文context
    setup(props,context)
        /**
         * props就是父组件传来的值，但是他是Porxy类型的对象
         * >Proxy:msg:'传递吧'
         * 可以当作我们自定义的reactive定义的数据
         */

        /**
         * context是一个对象 包含以下内容：
         * 1.emit触发自定义事件的 
         * 2.attrs 相当于vue2里面的 $attrs 包含：组件外部传递过来，但没有在props配置中声明的属性
         * 3.slots 相当于vue2里面的 $slots
         * 3.expose 是一个回调函数
         */
        console.log(context.slots);
        let person = reactive(
            name: '张三',
            age: 17,
        )

        

        function changeInfo()
            context.emit('hello', 666)
        

        //返回对象
        return 
            person,
            changeInfo
        

        //返回渲染函数（了解） 这个h是个函数
        //return () => h('name','age')
    

</script>

6.计算属性与监视

（1）computed函数

与vue2.x中的写法一致
需要引入computed

<template>
  <h1>一个人的信息</h1>
  <div>
      姓： <input type="text" v-model="person.firstName">
      名：<input type="text" v-model="person.lastName">
      <div>
          <span>简名：person.smallName</span> <br>
          <span以上是关于vue3的基本使用(超详细)的主要内容，如果未能解决你的问题，请参考以下文章 
 Vue3.x 超详细安装教程
 Vue3的patchFlags超详细讲解
 vue3.0 diff算法详解(超详细)
 uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性
 Vue3 的基础使用（详细）
 Vue 3，在变量更改时调用 $emit