Vue 笔记
1.Vue是什么？
一款用于构建用户界面的 JavaScript 框架
2.开发者
尤雨溪
3.Vue的特点
- 采用组件化模式，提高代码复用率、且让代码更好维护
- 声明式编码，无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
初识Vue：
-
想让Vue工作，必须创建一个Vue实例，且要传入一个配置对象
-
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
-
root容器里的代码被称为【Vue模板】
-
Vue实例和容器是一一对应的
-
真实开发中只有一个Vue实例，并且会配合着组件一起使用
-
{{xxx}}中的xxx要写JS表达式，且xxx可以自动读取的data中的所有属性
-
一旦data找那个的数据发生改变，则模板中的用到该数据的地方也会自动更新
<!-- 准备好一个容器 --> <div id="root"> <h1>{{title}}</h1> <h2>{{author}}</h2> <h3>{{date}}</h3> </div> <script> Vue.config.productionTip = false // 组织 Vue 在启动时生成生产提示 // 创建Vue实例 const app = new Vue({ el:'#root', // 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data:{ // 用于存储数据，供el所指定的容器去使用 title:'Hello Vue!', author:'Morgan', date:new Date() } }) </script>
Vue模板语法
1.插值语法
功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法
功能：用于解析标签
数据绑定
Vue中有2种数据绑定的方式：
-
单向绑定(v-bind)：数据只能从data流向页面
-
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向数据绑定一般都应用在表单类元素上 2.v-model:value 可以简写为 v-model
MVVM模型
- M：模型(Model)：对应 data 中的数据
- V：视图(View)：模板
- VM：视图模型(ViewModel)：Vue实例对象
Vue中的数据代理
通过VM对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为一个添加到vm上的属性，都指定一个getter/setter
- 在getter/setter内部去操作(读/写)data中对应的属性
事件处理
事件的基本使用
- 使用 v-on：xxx 或 @xxx 绑定事件，其中 xxx 是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要用箭头函数！否则this就不是vm
- methods中配置的函数，都是被Vue所管理的函数，this指向为 vm 或 组件实例对象
- @click = “demo” 与 @click = “demo($event)” 效果一致，但后者可以传参
Vue中的事件修饰符
- prevent：阻止默认事件
- stop：阻止事件冒泡
- once：事件只触发一次
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
Vue中的按键事件
Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete
- 退出 => esc
- 空格 => space
- 换行 => tab
- 上 => up
- 下 => down
- 左 => left
- 右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用；按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2).配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
计算属性
定义
要用的属性不存在，要通过已有的属性计算得来
原理
底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
(1).初次读取时会执行一次
(2).当依赖的数据发生改变时会被再次调用
优势
与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
备注
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
监视属性 - watch
-
当被监视属性变化时，回调函数自动调用，进行相关操作
-
监视的属性必须存在，才能进行监视
-
监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
深度监视
- Vue中的watch默认不监测对象内部值的改变(一层)
- 配置deep:true可以监测对象内部值改变(多层)
备注：
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构，决定是否采用深度监视
computed和watch之间的区别
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
- 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、Ajax的回调函数等)，最好写成箭头函数，这样this的指向才是 vm 或 组件实例对象
绑定样式
class样式
写法：class = ‘xxx’,xxx 可以是字符串、数组、对象
- 字符串写法适用于：类名不确定，要动态获取
- 对象写法适用于：要绑定多个样式，个数不确定、名字也不确定
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定、但不确定用不用
style样式
- :style=“{fontSize:xxx}” 其中 xxx 是动态值
- :style=“[a,b]” 其中 a、b是样式对象
条件渲染
v-if
写法：
- v-if = “表达式”
- v-else-if = “表达式”
- v-else = “表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
v-show
写法：v-show = “表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素违背移除，仅仅是样式隐藏掉
备注：
使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
列表渲染
v-for指令
- 用于展示列表数据
- 语法：v-for = “(item,index) in xxx” :key = ‘yyy’
- 可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)
key的原理
虚拟DOM中key的作用：
- key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
- 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
对比规则：
1.旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变，直接使用之前的真实DOM
②.若虚拟DOM中内容变了，则 生成新的真实DOM，随后替换掉页面中之前的真实DOM
2.旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题：
- .若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低 - 如果结构找那个还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题
开发中如何选择key？
- 最好使用每条数据的唯一标识作为key，如id、手机号、身份证号等
- 如果不存在对数据的逆序添加、删除等破坏顺序操作，仅用于渲染列表展示，使用index作为key是没有问题的
Vue监视数据的原理
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据
(1).对象找那个后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，使用如下API：
Vue.set(target,propertyName/index,value) 或
vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新
(2).重新解析模板，进而更新页面
4.在Vue中修改数组中的某个元素一定要用如下方法：
1.使用API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm的跟数据对象添加属性！！！
过滤器
定义： 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法：
- 注册过滤器：Vue.filter(name,callback) 或 new Vue(filter:{})
- 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = " xxx | 过滤器名"
备注：
- 过滤器也可以接受额外参数、多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据
内置指令
v-text
- 作用：向其所在的节点中渲染文本内容
- 与插值语法的区别：v-text会替换节点中内容
v-html
作用： 向指定节点中渲染包含HTML结构的内容
与差值语法的区别：
- v-html会替换节点中所有的内容，{{xx}}则不会
- v-html可以识别html结构
严重注意：v-html有安全性问题！！！
- 在网站上动态任意HTML是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上
v-cloak
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时展示出{{xxx}}的问题
v-once
- v-once所在的节点在初次动态渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre
- 跳过其所在节点的编译过程
- 可利用它跳过 —— 没有使用指令语法、插值语法的节点，会加快编译
自定义指令
定义语法：
局部指令：
new Vue({
directives:{指令名:配置对象}
})
或
new Vue({
directives(){}
})
全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调：
- bind：指令与元素成功绑定时调用
- inserted：指令所在元素被插入页面时调用
- update：指令所在模板结构被重新解析时调用
备注：
- 指令定义时不加v-，但使用时要加v-
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
生命周期
- 又名：生命周期回调函数、生命周期函数、生命周期钩子
- 是什么：Vue在关键时刻调用的一些特殊名称的函数
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this执行vm或组件实例对象
常用的生命周期钩子
- mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
- beforeDestroy：清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
- 销毁后借助Vue开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
Vue组件化编程
模块与组件、模块化与组件化
模块
- 理解：向外提供特定功能的js程序，一般就是一个js文件
- why：js文件很多很复杂
- 作用：复用js，简化js的编写，提高js运行效率
组件
- 定义:实现应用中局部功能代码和资源的集合
- why:一个界面的功能很复杂
- 作用：复用编码，简化项目编码，提高运行效率
模块化
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用
Vue中使用组件的三大步骤
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但稍有区别
区别如下：
- el 不要写 —— 最终所有的组件都要经过vm的管理，由vm中的el决定服务那个容器
- data 必须写成函数 —— 避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
如何注册组件？
- 局部注册：通过new Vue时传入components选项
- 全局注册：通过Vue.component(‘组件名’,组件)
编写组件标签
<school></school>
关于VueComponent
- 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
- 只需要写
<xxx></xxx>或<xxx/>，Vue解析时会自动创建xxx组件的实例对象，即：new VueComponent(options) - 特别注意： 每次调用Vue.extend，返回的都是一个全新的VueComponent
- 关于this指向：
- 组件配置中： data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
- new Vue()配置中： data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
Vue脚手架
是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过
@vue/cli实现的交互式的项目脚手架。 - 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service)，该依赖：- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器
(2).vue.runtime.xxx.js是运行版的vue，只包含核心功能
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去指定具体内容
vue.config.js 配置文件
使用 vue inspect > output.js 可以查看Vue脚手架的默认配置
使用 vue.config.js 可以对脚手架进行个性化定义，详情见 https://cli.vuejs.org/zh
ref 属性
- 用于给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
- 使用方式：
- 打标识：
<h1 ref="xxx">......</h1>或<School ref="xxx"></School> - 获取：this.$refs.xxx
- 打标识：
配置项props
功能：让组件接收外部传过来的数据
-
传递数据：
<Demo name="xxx" /> -
接收数据：
-
只接收：
porps:['name'] -
限制类型：
props:{ name:Number } -
限制类型、限制必要性、指定默认值：
props:{ name:{ type:String, //类型 required:true,//必要性 default:'xxx',//默认值 } }
-
备注：props是只读的，Vue底层会监测是否对props进行修改，若进行修改了则会发出警告
mixin(混入)
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
-
定义混合：
{ data(){...}, methods:{...} } -
使用混入
(1).全局混入：
Vue.mixin(xxx)(2).局部混入：
mixins:['xxx']
插件
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件：
对象.install = function(Vue,options){
// 1.添加全局过滤器
Vue.filter(....)
// 2.添加全局指令
Vue.directive(....)
// 3.配置全局混入(合)
Vue.mixin(....)
// 4.添加实例方法
Vue.prototype.$myMethod = function(){...}
Vue.prototype.$myProperty = xxxx
}
使用插件：Vue.use()
scoped样式
作用：让样式在局部生效，防止冲突
写法：<style scoped>
组件化编码流程
- 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
- 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
- 一个组件在用：放在组件自身即可
- 一些组件在用：放在其共同的父组件上(状态提升)
- 实现交互：从绑定事件开始
props适用于：
- 父组件 ===> 子组件通信
- 子组件 ===> 父组件通信(要父先给子一个函数)
使用v-model时要切记： v-model绑定的值不能是props传过来的值，因为props是不可以修改的
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做
webStorage
- 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
- 浏览器端通过window.sessionStorage 和 window.localStorage 属性来实现本地存储机制
- 相关API：
- xxxxxStorage.setItem(‘key’,‘value’) 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
- xxxxxStorage.getItem(‘key’); 该方法接收一个键名作为参数，返回键名对应的值
- xxxxxStorage.removeItem(‘key’) 该方法接收一个键名作为参数，并将该键名从存储中删除
- xxxxxStorage.clear() 该方法会清空存储中的所有数据
- 备注：
- SessionStorage存储的内容会随着浏览器窗口关闭而消失
- LocalStorage存储的内容，需要手动清除才会消失
xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，则getItem的返回值为null- JSON.parse(null)的结果依然是null
组件的自定义事件
-
一种组件间通信的方式，适用于：子组件 ===> 父组件
-
使用场景：A是父组件，B是子组件，B想给A传数据，name就要在A中给B绑定自定义事件
-
绑定自定义事件：
-
第一种方式，在父组件中：
<Demo @atguigu="text" />或<Demo v-on:atguigu="text" /> -
第二种方式，在父组件中：
<Demo ref="demo" /> ...... mounted(){ this.$ref.xxx.$on('atguigu',this.text) } -
若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
-
-
触发自定义事件：
this.$emit('atguigu',数据) -
解绑自定义事件：
this.$off('atguigu') -
组件也可以绑定原生DOM事件，需要使用native修饰符
-
注意：通过
this.$ref.xxx.$on('atguigu'，回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
全局事件总线
-
一种组件间通信的方式，适用于任意组件间通信
-
安装全局事件总线：
new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前应用的vm }, ...... }) -
使用事件总线：
1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件
methods(){ demo(data){......} }, ...... mounted(){ this.$bus.$on('xxxx),.this.demo }2.提供数据:
this.$bus.$on('xxxx',this.demo) -
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
消息订阅与发布(pubsub)
-
一种组件间通信的方式，适用于任意组件间通信
-
使用步骤：
-
安装pubsub:
npm i pubsub-js -
引入：
import pubsub from 'pubsub-js -
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
methods(){ demo(data){......} } ...... mounted(){ this.pid = pubsub.subscribe('xxx',this.demo) // 订阅消息 } -
提供数据：
pubsub.publish('xxx',数据) -
最好在beforeDestory钩子中，用
PubSub.unsubscribe(pid)去取消订阅
-
nextTick
- 语法：
this.$nextTick(回调函数) - 作用：在下一次DOM更新结束后执行指定的回调
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
Vue封装的过渡与动画
-
作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
-
图示：
-
写法
-
准备好样式
- 元素进入的样式
- v-enter:进入的起点
- v-enter-active：进入过程中
- v-enter-to：进入的终点
- 元素离开的样式
- v-leave：离开的起点
- v-leave-active：离开过程中
- v-leave-to：离开的终点
- 元素进入的样式
-
使用
<transition>包裹要过渡的元素，并配置name属性：<transition name="hello"> <h1 v-show="isShow">你好啊！</h1> </transiton> -
备注：若有多个元素需要过渡，则需要使用：
<transition-group>且每个元素都要指定key值
-
vue脚手架配置代理
方法一
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
说明：
- 优点：配置简单，请求资源时直接发给前端(8080)即可
- 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
- 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么请求会转发给服务器(优先匹配前端资源)
方法二
编写vue.config.js配置具体代理规则：
modules.exports = {
devServer:{
proxy:{
'/api':{ // 匹配所有以'/api'开头的请求路径
target:'http://localhost:5000',//代理目标的基础路径
changeOrigin:true,
pathRewrite:{'^/api}
}
}
}
}
说明：
- 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
- 缺点：配置略微繁琐，请求资源时必须加前缀
插槽
-
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===>子组件
-
分类：默认插槽、具名插槽、作用域插槽
-
使用方式：
-
默认插槽：
父组件中： <Category> <div>html结构</div> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot>插槽默认内容...</slot> </div> </template> -
具名插槽：
父组件中： <Category> <template slot="center"> <div>html结构</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中： <template> <div> <!-- 定义插槽 --> <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template> -
作用域插槽：
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)
2.具体编码：
父组件中： <Category title="actresses"> <template scope="{actresses}"> <ul> <li v-for="(actress, index) in actresses" :key="index"> {{ actress }} </li> </ul> </template> </Category> 子组件中： <template> <div class="category"> <h3>{{ title }}分类</h3> <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) --> <slot :actresses="actresses">default message</slot> <!-- <slot name="footer">aaaaaaaaa</slot> --> </div> </template> <script> export default { name: "Category", // props: ["listData", "title"], props: ["title"], data() { return { actresses: ["河北彩花", "桥本有菜", "枫花恋", "桃乃木香奈"], }; }, }; </script>
-
vuex
理解 vuex
vuex 是什么
- 概念：专门在 Vue 中实现集中式状态 (数据) 管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理 (读/写)，也是一种组件间通信的方式，且适用于任意组件间通信
何时使用 vuex
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
vuex 工作原理图
搭建 vuex 环境
-
创建文件：src/store.index.js
// 该文件用于创建Vuex中最为核心的store import Vue from "vue"; // 引入Vuex import Vuex from "vuex";// 使用vuex
Vue.use(Vuex);// actions —— 用于响应组件的动作
const actions = {};// mutations —— 用于操作数据(state)
const mutations = {};// state —— 用于存储数据
const state = {};// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
});
2. 在 main.js 中创建 vm 时传入 store 配置项
```javascript
// 引入 vuex
import Vuex from "vuex";
// 引入 store
import store from "./store";
......
// 创建Vue实例对象 -- vm
new Vue({
store,
render: (h) => h(App),
}).$mount("#app");
基本使用
-
初始化数据、配置 actions、mutations，操作文件store.js
// 该文件用于创建Vuex中最为核心的store import Vue from "vue"; // 引入Vuex import Vuex from "vuex"; // 使用vuex Vue.use(Vuex); // actions —— 用于响应组件的动作 const actions = { increment(context, value) { // console.log('increment',context,value) console.log("call actions"); context.commit("INCREMENT", value); }, }; // mutations —— 用于操作数据(state) const mutations = { INCREMENT(state, value) { // console.log(a,b); console.log("call mutations"); state.sum += value; }, }; // state —— 用于存储数据 const state = { sum: 0, }; // 创建并暴露store export default new Vuex.Store({ actions, mutations, state, }); -
组件中读取 vuex 中的数据：
$store.state.sum -
组建中修改 vuex 中的数据：
$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名'，数据) -
备注：若没有网络请求或其他业务逻辑，组件找那个也可以通过actions，即不写 dispatch ，直接写 commit
getters 的使用
-
概念：当state中的数据需要经过加工后再使用，可以使用getters加工
-
在 store.js 中追加 getters 配置
// getters —— 用于将state找那个的数据进行加工 const getters = { sumDecuple(state){ return state.sum * 10 } }; // 创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters }); -
组件中读取数据：
$store.getters.sumDecuple
四个map方法的使用
-
mapState方法： 用于映射 state 中的数据为计算属性
// 借助mapState生成计算属性，从state中读取数据。(对象写法) ...mapState({sum:'sum',name:'name',sex:'sex'}), // 借助mapState生成计算属性，从state中读取数据。(数组写法) ...mapState(["sum", "name", "sex"]), -
mapGetters方法： 用于映射 getters 中的数据为计算属性
// 借助mapGetters生成计算属性，从state中读取数据。(对象写法) ...mapGetters({sumDecuple:'sumDecuple'}) // 借助mapGetters生成计算属性，从state中读取数据。(数组写法) ...mapGetters(["sumDecuple"]), -
mapActions方法： 用于生成与 actions 对话的方法，即：包含
$store.dispatch(xxx)的函数methods:{ // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法) ...mapActions({incrementIfOdd:'incrementIfOdd',incrementAsync:'incrementAsync'}), // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法) ...mapActions(['incrementIfOdd','incrementAsync']), } -
mapMutations方法： 用于生成与mutations对话的方法，即：包含
$store.commit(xxx)的函数methods:{ // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象方法) ...mapMutations({ increment: "INCREMENT", decrement: "DECREMENT" }), // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法) ...mapMutations(['INCREMENT','DECREMENT']), } -
备注： mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件传递好参数，否则参数是事件对象。
模块化 + 命名空间
-
目的：让代码更好维护，让多种数据分类更加明确
-
修改store.js
const countOptions = { namespaced:true, // 开启命名空间 state:{xxx:xxx}, mutations:{...}, actions:{...}, getters:{ sumDecuple(state){ return state.sum * 10; } } } const personOptions = { namespaced:true, // 开启命名空间 state:{xxx:xxx}, mutations:{...}, actions:{...}, getters:{...} } const store = new Vuex.Store({ modules:{ countOptions, personOptions } }) -
开启命名空间后，组件中读取state数据
// 方式一，自己直接读取 this.$store.state.personOptions.personList // 方式二，借助mapState读取 ...mapState('countOptions',['sum']) -
开启命名空间后，组件中读取getters数据
// 方式一，自己直接读取 this.$store.getters['personOptions/firstPersonName'] // 方式二，借助mapGetters读取 ...mapGetters('countOptions',['sumDecuple']) -
开启命名空间后，组件中调用dispatch
// 方式一，自己直接dispatch this.$store.dispatch('personOptions/addPersonWang',personData) // 方式二，借助mapActions ...mapActions('countOptions',["incrementIfOdd", "incrementAsync"]), -
开启命名空间后，组件中调用commit
// 方式一，自己直接commit this.$store.commit("personOptions/ADD_PERSON", personData); // 方式二，借助mapMutations ...mapMutations('countOptions',{ increment: "INCREMENT", decrement: "DECREMENT" }),
vuex 核心概念和 API
state
- vuex 管理的状态对象
- 唯一的
-
const state = { xxx: initValue }
actions
-
值为一个对象，包含多个响应用户动作的回调函数
-
通过 commit( ) 来触发 mutation 中函数的调用，间接更新 state
-
如何触发 actions 中的回调？
- 在组件中使用：
$store.dispatch('对应的action会回调名')触发
- 在组件中使用：
-
可以包含异步代码
-
const actions = { zzz({commit,state},data1){ commit('yyy',{data1}) } }
mutations
-
值为一个对象，包含多个直接更新 state 的方法
-
谁能调用 mutations 中的方法？如何调用？
- 在 action 中使用：
commit('对应的 mutitions 方法名')触发
- 在 action 中使用：
-
mutations 中方法的特点：不能写异步代码、只能淡出的操作state
-
const mutations = { yyy(state,{data1}){ //更新state的某个属性 } }
getters
- 值为一个对象，包含多个用于返回数据的函数
- 如何使用？— $store.getters.xxx
-
const getters = { mmm(state){ return state.msg + '!' } }
modules
- 包含多个 module
- 一个 module 是一个 store 的配置对象
- 与一个组件 (包含有共享数据) 对应
vue-router
vue-router的理解
vue的一个插件库，专门用来实现SPA应用
对SPA应用的理解
- 单页Web应用(single page web application,SPA)
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajaxz请求获取
路由的理解
- 什么是路由？
- 一个路由就是一组映射关系(key-value)
- key为路径，value可能是function或component
- 路由分类
- 后端路由：
- 理解：value是function，用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
- 前端路由：
- 理解：value是component，用于展示页面内容
- 工作过程：当浏览器的路径改变时，对应的组件就会显示
- 后端路由：
基本使用
-
安装vue-router，命令：
npm i vue-router -
应用插件：
Vue.use(VueRouter) -
编写router配置项：
// 该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router"; // 引入组件 import About from '../components/About' import Home from '../components/Home' // 创建并暴露一个路由器 export default new VueRouter({ routes: [ { path: "/about", component: About, }, { path: "/home", component: Home, }, ], }); -
实现切换 (active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link> -
指定展示位置
<router-view></router-view>
几个注意点
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹 - 通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息 - 整个应用只有一个router，可以通过组件的
$router属性获取到
嵌套路由(多级路由)
-
配置路由规则，使用children配置项：
routes: [ { path: "/home", component: Home, children: [ { path: "message", component: Message, }, { path: "news", component: News, }, ], }, ] -
跳转(要写完整路径)：
<router-link to="/home/news">News</router-link>
路由的query参数
-
传递参数
<!-- 跳转路由并携带query参数，to的字符串写法 --> <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`" >{{ item.title }}</router-link > <!-- 跳转并携带query参数，to的对象写法 --> <router-link :to="{ path:'/home/message/detail', query:{ id:item.id, title:item.title } }">{{ item.title }}</router-link > -
接收参数:
$route.query.id $route.query.title
命名路由
-
作用：可以简化路由的跳转
-
如何使用
-
给路由命名：
{ name:'guanyu', //给路由命令 path: "/about", component: About, }, -
简化跳转
<router-link :to="{ name: 'guanyu' }">About</router-link> <router-link :to="{ // path:'/home/message/detail', name:'xiangqing', query:{ id:item.id, title:item.title } }">{{ item.title }}</router-link >
-
路由的params参数
-
配置路由，声明接收params参数
{ path: "/home", component: Home, children: [ { name:'消息', path: "message", component: Message, children:[ { name:'xiangqing', path:'detail/:id/:title', // 使用占位符声明接收params参数 component:Detail } ] }, { path: "news", component: News, }, ], }, -
传递参数
<!-- 跳转路由并携带params参数，to的字符串写法 --> <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link> <!-- 跳转并携带query/params参数，to的对象写法 --> <router-link :to="{ // path:'/home/message/detail', name:'xiangqing', /* query:{ id:item.id, title:item.title }, */ params:{ id:item.id, title:item.title } }">{{ item.title }}</router-link >特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
-
接收参数
$route.params.id
路由的props配置
作用：让路由组件更方便的收到参数
{
name: "xiangqing",
path: "detail",
// path:'detail/:id/:title',
component: Detail,
// props的第一种写法，值为对象,该对象中的所有key-value都会以props的形式传给Detail组件
// props:{a:1,b:'hello'}
// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true,
// props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
// props($route){
// return {id:$route.query.id,title:$route.query.title}
// }
},
<router-link> 的replace属性
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：分别是push和replace，push时追加历史记录，replace是替换当前记录。路由跳转时候默认为push
- 如何开启replace模式
<router-link replace ......>News<router-link>
编程式路由导航
-
作用：不借助
<router-link> 实现路由跳转，让路由跳转更加灵活// $router的两个API this.$router.push({ name: "xiangqing", query: { id: item.id, title: item.title, }, }); this.$router.replace({ name: "xiangqing", query: { id: item.id, title: item.title, }, }); this.$router.back() //后退 this.$router.forward() //前进 this.$router.go(2) //跳转指定次数
缓存路由组件
-
作用：让不展示的路由组件保持挂载，不被销毁
-
具体编码
<!-- include ===> 组件名 --> <keep-alive include="News"> <router-view></router-view> </keep-alive>
两个新的生命周期钩子
- 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
- 具体名字：
activated路由组件被激活时触发deactivated路由组件失活时触发
路由守卫
-
作用：对路由进行权限控制
-
分类：全局守卫、独享守卫、组件内守卫
-
全局守卫
// 全局前置路由守卫——初始化的时候被调用 router.beforeEach((to, from, next) => { console.log("前置路由守卫", to, from); if (to.meta.isAuth) { //判断是否需要鉴权 if (localStorage.getItem("school") === "atguigu") { next(); } } else { next(); } }); // 全局后置路由守卫——每次路由切换之后被调用 router.afterEach((to, from) => { console.log("后置路由守卫", to, from); document.title = to.meta.title; }); -
独享守卫
beforeEnter: (to, form, next) => { // if (to.meta.isAuth) { //判断是否需要鉴权 if (localStorage.getItem("school") === "atguigu") { next(); } } else { next(); } }, -
组件内守卫
// 通过路由规则，进入该组件时被调用 beforeRouteEnter(to, from, next) { // ... console.log("app---beforeRouteEnter"); if (to.meta.isAuth) { //判断是否需要鉴权 if (localStorage.getItem("school") === "atguigu") { next(); } } else { next(); } }, // 通过路由规则，离开该组件时被调用 beforeRouteLeave(to, from, next) { // ... console.log('app-beforeRouteLeave',to,from); next() }, };
路由器的两种工作模式
- 对于一个URL来说，什么是hash值？ —— # 及其后面的内容就是hash值
- hash值不会包含在http请求中，即：hash值不会带给服务器
- hash模式：
- 地址中永远带着#号，不美观
- 若以后将地址通过第三方手机App分享，若App校验严格，则地址会被标记为不合法
- 兼容性较好
- history模式：
- 地址干净，美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
Vue3
Vue3简介
- 2020年9月18日发布
- 耗时2年多
Vue3带来了什么
- 性能的提升
- 打包大小减少41%
- 初次渲染快55%，更新渲染快133%
- 内存减少54%
- 源码的升级
- 使用Proxy代替defineProperty实现响应式
- 重写虚拟DOM的实现和Tree-Shaking
- 拥抱TypeScript
- Vue3可以更好的支持Typescript
- 新的特性
- Composition API(组合API)
- setup配置
- ref与reactive
- watch与watchEffect
- provide与inject
- …
- 新的内置组件
- Fragment
- Teleport
- Suspense
- 其他改变
- 行的生命周期钩子
- data选项始终被声明为一个函数
- 移除keyCode支持作为v-on的修饰符
- Composition API(组合API)
创建 Vue 3 工程
-
使用 vue-cli 创建
## 安装@vue/cli npm install -g @vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve -
使用 vite 创建
-
什么是 vite? – 新一代前端构建工具
-
优势：
- 开发环境中，无需打包操作，可快速的冷启动
- 轻量快速的热重载(HMR)
- 真正的按需编译，不再等待整个应用编译完成
## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev
常用 Composition API
setup
- 理解：Vue3.0中一个新的配置项，值为一个函数。
- setup是所有Composition API(组合API)的舞台
- 组件中所用到的：数据、方法等，均要配置在setup中
- setup函数的两种返回值：
- 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。(重点关注)
- 若返回一个渲染函数：则可自定义渲染函数。(了解)
- 注意点：
- 尽量不要与Vue2.x配置混用
- Vue2.x配置(data、methods、computed…) 中可以访问到setup中的属性、方法
- 但在setup中不能访问到Vue2.x配置
- 如果有重名，setup优先
- setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。(后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合)
- 尽量不要与Vue2.x配置混用
ref 函数
- 作用：定义一个响应式的数据
- 语法：const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象，简称ref对象)
- JS中操作数据：xxx.value
- 模板中读取数据：不需要value，直接：
<div>{{xxx}}</div>
- 备注：
- 接收的数据可以是：基本类型，也可以是对象类型
- 基本类型的数据：响应式依然是靠 Object.defineProperty() 的get与set完成的
- 对象类型的数据：内部求助了Vue3.0中的一个新函数 – reactive函数
reactive函数
- 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
- 语法：const 代理对象 = reactive(源对象) 接收一个对象(或数组)，返回一个代理对象(Proxy的实例对象，简称proxy对象)
- reactive定义的响应式数据是深层次的
- 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作
Vue3.0中的响应式原理
Vue2.x 的响应式
-
实现原理：
-
对象类型：通过Object.defineProperty() 对属性的读取、修改进行拦截(数据劫持)。
-
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
Object.defineProperty(data,'count',{ get(){}, set(){} })
-
-
存在问题：
- 新增属性、删除属性，界面不会更新
- 直接通过下标修改数组，界面不会自动更新
Vue3.0的响应式
-
实现原理：
-
通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
-
通过Reflect(反射)：对源对象的属性进行操作
new Proxy(data,{ // 拦截读取属性值 get(target,prop){ return Reflect.get(target,prop) }, // 拦截设置属性值或添加新属性 set(target,prop,value){ return Reflect.set(target,prop,value) }, // 拦截删除属性 deleteProperty(target,prop){ return Reflect.deleteProperty(target,prop) } }) proxy.name = 'tom'
-
reactive 对比 ref
- 从定义数据角度对比：
- ref用来定义：基本类型数据
- reactive用来定义；对象(或数组)类型数据
- 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过reactive转为代理对象
- 从原理角度对比：
- ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式(数据劫持)。
- reactive 通过 Proxy 来实现响应式(数据劫持)，并通过 Reflect 操作源对象内部的数据
- 从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
- reactive定义的数据：操作数据与读取数据 —— 均不需要 .value
setup的两个注意点
- setup执行的时机
- 在beforeCreate之前执行一次，this是undefined
- setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
- context：上下文对象
- attrs:值为对象，包含：组件外部传递过来，但没有在prop配置中声明的属性，相当于 this.$attrs
- slots:收到的插槽内容，相当于 this.$slots
- emit:分发自定义事件的函数，相当于 this.$emit
计算属性与监视
computed 函数
-
与Vue2.x 中 computed配置功能一致
-
写法
import {computed} from 'vue' setup(){ ... //计算属性——简写 let fullName = computed(() => { return person.firstName + '-' + person.lastName }) //计算属性——完整 let fullName = computed({ get(){ return person.firstName + '-' + person.lastName }, set(value){ const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) }
watch函数
-
与Vue2.x中watch配置功能一致
-
两个小“坑”：
- 监视reactive定义的响应式数据时：oldValue无法正确读取、强制开启了深度监视(deep配置失效)
- 监视reactive定义的响应式数据中某个属性时：deep配置有效
-
//情况一：监视ref定义的响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue) },{immediate:true}) //情况二：监视多个ref定义的响应式数据 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或msg变化了',newValue,oldValue) }) /* 情况三：监视reactive定义的响应式数据 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！ 若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 */ watch(person,(newValue,oldValue)=>{ console.log('person变化了',newValue,oldValue) },{immediate:true,deep:false}) //此处的deep配置不再奏效 //情况四：监视reactive定义的响应式数据中的某个属性 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{immediate:true,deep:true}) //情况五：监视reactive定义的响应式数据中的某些属性 watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{immediate:true,deep:true}) //特殊情况 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了',newValue,oldValue) },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效
watchEffect函数
- watch的套路是：既要指明监视的属性，也要指明监视的回调
- watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
- watchEffect有点像computed：
- 但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值
- 而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值
// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(() => {
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了！')
})
生命周期
- Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有两个被更名：
- beforeDestory 改名为 beforeUnmount
- destoryed 改名为 unmounted
- Vue3.0也提供了Composition API形式的生命周期钩子
- beforeCreate ==> setup()
- created ==> setup()
- beforeMount ==> onBeforeMount
- mounted ==> onMounted
- beforeUpdate ==> onBeforeUpdate
- updated ==>onUpdated
- beforeUnmount ==> onBeforeUnmount
- unmounted ==> onUnmounted
自定义hook函数
- 什么是hook？— — 本质是一个函数，把setup函数中使用的Composition API 进行了封装
- 类似于vue2.x中的mixin
- 自定义hook的优势：复用代买，让setup中的逻辑更清楚易懂
toRef
- 作用:创建一个ref对象,其value值指向另一个对象中的某个属性
- 语法:
const name = toRef(person,'name') - 应用：要将响应式对象中的某个属性单独提供给外部使用时
- 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法： toRefs(person)
其它Composition API
shallowReactive 与 shallowRef
- shallowReactive：只处理对象最外层属性的响应式（浅响应式）
- shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
- 什么时候使用
- 如果有一个对象数据，结构比较深，但变化时只是最外层属性变化 ==> shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ==> shallowRef
readonly 与 shallowReadonly
- readonly：让一个响应式数据变为只读的（深只读）
- shallowReadonly：让一个响应式数据变为只读的（浅只读）
- 应用场景：不希望数据被修改时
toRaw 与 markRaw
- toRaw:
- 作用：将一个由reactive生成的响应式对象转为普通对象
- 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
- markRaw：
- 作用：标记一个对象，使其永远不会再成为响应式对象
- 应用场景：
- 有效值不应被设置为响应式的，例如复杂的第三方类库等
- 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
customRef
-
作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制
-
实现防抖效果：
<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3> </template> <script> import {ref,customRef} from 'vue' export default{ name:'Demo', setup(){ // let keyword = ref('hello') // 使用Vue准备好的内置ref // 自定义一个myRef function myRef(value,delay){ let timer // 通过customRef 去实现自定义 return customRef((track,trigger) => { return{ get(){ track() //告诉Vue这个value是需要被“追踪”的 return value }, set(newValue){ clearTimeout(timer) timer = setTimeout(() => { value = newValue trigger() // 告诉Vue去更新界面 },delay) } } }) } let keyword = myRef('hello',500) // 使用自定义的ref return { keyword } } } </script>
provide 与 inject
-
作用：实现祖与后代组件间通信
-
套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据
-
具体写法：
-
祖组件中：
setup(){ ...... let car = reactive({name:'BMW',price:'40w'}) provide('car',car) ...... } -
后代组件中：
setup(props,context){ ...... const car = inject('car') return {car} ...... }
-
响应式数据的判断
- isRef：检查一个值是否为一个ref对象
- isReactive：检查一个对象是否是由reactive创建的响应式代理
- isReadonly：检查一个对象是否是由readonly创建的只读代理
- isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理
Composition API 的优势
1.Options API 存在的问题
使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U7GW0C3s-1675614797521)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84e4e2c02424d9a99862ade0a2e4114~tplv-k3u1fbpfcp-watermark.image)]
2.Composition API 的优势
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
新的组件
Fragment
- 在Vue2中：组件必须有一个根标签
- 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
- 好处；减少标签层级，减小内存占用
Teleport
-
什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术
<teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个弹窗</h3> <button @click="isShow = false">关闭弹窗</button> </div> </div> </teleport>
Suspense
-
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
-
使用步骤：
-
异步引入组件
import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(() => import('./components/Child.vue')) -
使用Suspense包裹组件，并配置好default与fallback
<template> <div class="app"> <h3>App组件</h3> <Suspense> <template v-slot:default> <Child /> </template> <template v-slot:fallback> <h3>加载中...</h3> </template> </Suspense> </div> </template>
-
其他
全局API的转移
-
Vue2.x 有许多全局API和配置
-
例如：注册全局组件、注册全局指令等。
// 注册全局组件 Vue.component('MyButton',{ data:() => ({ count:0 }), template:'<button @click="count++">Clicked {{count}} times</button>' }) // 注册全局指令 Vue.directive('focus',{ inserted:el => el.focus() })
-
-
Vue3.0中对这些API做出了调整：
- 将全局的API，即：Vue.xxx调整到应用实例(app)上
2.x 全局 API（Vue） | 3.x 实例 API (app) |
|---|---|
| Vue.config.xxxx | app.config.xxxx |
| Vue.config.productionTip | <strong style="color:#DD5145">移除</strong> |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
其他改变
-
data选项应始终被声明为一个函数
-
过度类名的更改
-
Vue2.x写法
.v-enter, .v-leave-to { opacity: 0; } .v-leave, .v-enter-to { opacity: 1; } -
Vue3.x写法
.v-enter-from, .v-leave-to { opacity: 0; } .v-leave-from, .v-enter-to { opacity: 1; }
-
-
移除keyCode作为v-on的修饰符，同时也不再支持config.keyCodes
-
移除v-on.native 修饰符
-
父组件中绑定事件
<my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" /> -
子组件中声明自定义事件
<script> export default { emits: ['close'] } </script>
-
-
移除过滤器(filter)
过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。
加载中…
其他
全局API的转移
-
Vue2.x 有许多全局API和配置
-
例如：注册全局组件、注册全局指令等。
// 注册全局组件 Vue.component('MyButton',{ data:() => ({ count:0 }), template:'<button @click="count++">Clicked {{count}} times</button>' }) // 注册全局指令 Vue.directive('focus',{ inserted:el => el.focus() })
-
-
Vue3.0中对这些API做出了调整：
- 将全局的API，即：Vue.xxx调整到应用实例(app)上
2.x 全局 API（Vue） | 3.x 实例 API (app) |
|---|---|
| Vue.config.xxxx | app.config.xxxx |
| Vue.config.productionTip | <strong style="color:#DD5145">移除</strong> |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
其他改变
-
data选项应始终被声明为一个函数
-
过度类名的更改
-
Vue2.x写法
.v-enter, .v-leave-to { opacity: 0; } .v-leave, .v-enter-to { opacity: 1; } -
Vue3.x写法
.v-enter-from, .v-leave-to { opacity: 0; } .v-leave-from, .v-enter-to { opacity: 1; }
-
-
移除keyCode作为v-on的修饰符，同时也不再支持config.keyCodes
-
移除v-on.native 修饰符
-
父组件中绑定事件
<my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" /> -
子组件中声明自定义事件
<script> export default { emits: ['close'] } </script>
-
-
移除过滤器(filter)
过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。
扫一扫
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
