做外贸生意最好的网站,使用html制作个人主页,seo优化工具推荐,南通网站建设有限公司一 Vue3的变化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API#…一 Vue3的变化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API组合API setup配置ref与reactivewatch与watchEffectprovide与inject 新的内置组件 FragmentTeleportSuspense 其他改变 新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符 5 组合式API和配置项API 5.1 Options API 存在的问题 使用传统OptionsAPI中新增或者修改一个需求就需要分别在datamethodscomputed里修改 。 5.2 Composition API 的优势 我们可以更加优雅的组织我们的代码函数。让相关功能的代码更加有序的组织在一起。 6 项目分析 分析文件目录 main.js Vue2项目的main.js import Vue from vue import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App), }).$mount(#app)看看vm是什么 const vm new Vue({render: h h(App), })console.log(vm)vm.$mount(#app)我们再来看看Vue3项目中的main.js import { createApp } from vue import App from ./App.vuecreateApp(App).mount(#app)我们来分析一下吧 // 引入的不再是Vue构造函数了引入的是一个名为createApp的工厂函数 import { createApp } from vue import App from ./App.vue// 创建应用实例对象——app(类似于之前Vue2中的vm但app比vm更“轻”) const app createApp(App) console.log(app) // 挂载 app.mount(#app)这里的app到底是啥我们输出到控制台看看 App.vue 我们再来看看组件 在template标签里可以没有根标签了 template!-- Vue3组件中的模板结构可以没有根标签 --img altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App/ /template二 创建Vue3.0工程 1.使用 vue-cli 创建 官方文档创建一个项目 | Vue CLI ## 查看vue/cli版本确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve2.使用 vite 创建 官方文档快速上手 | Vue.js vite官网https://vitejs.cn 介绍为什么选 Vite | Vite 官方中文文档 什么是vite—— 新一代前端构建工具。优势如下 开发环境中无需打包操作可快速的冷启动。轻量快速的热重载HMR。真正的按需编译不再等待整个应用编译完成。传统构建 与 vite构建对比图 ## 创建工程 npm init vite-app project-name ## 进入工程目录 cd project-name ## 安装依赖 npm install ## 运行 npm run dev# 确保你安装了最新版本的 Node.js然后在命令行中运行以下命令 (不要带上 符号)npm init vuelatest # 这一指令将会安装并执行 create-vue它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示✔ Project name: … your-project-name ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / YesScaffolding project in ./your-project-name... Done. # 如果不确定是否要开启某个功能你可以直接按下回车键选择 No。在项目被创建后通过以下步骤安装依赖并启动开发服务器 cd your-project-namenpm installnpm run dev三 三、常用API 3.1 setup setup为Vue3.0中一个新的配置项值为一个函数 setup是所有Composition API组合API编写的位置 组件中所用到的数据、方法等等均要配置在setup中 setup函数的返回值返回一个对象对象中的属性、方法, 在模板中均可以直接使用 注意 尽量不要与Vue2.x配置混用 Vue2.x配置data、methos、computed...中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置data、methos、computed...。如果有重名, setup优先。 template{{name}}--{{age}}--{{xx}} /templatescriptexport default {name: App,data(){return {xx:this.name}},setup(){let namelqzlet age 19return {name,age}}, } /script3.2 ref函数 作用: 定义一个响应式的数据语法: const xxx ref(initValue) 创建一个包含响应式数据的引用对象reference对象简称ref对象。JS中操作数据 xxx.value模板中读取数据: 不需要.value直接div{{xxx}}/div备注 接收的数据可以是基本类型、也可以是对象类型。基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的对象类型的数据内部 求助 了Vue3.0中的一个新函数—— reactive函数 3.3 reactive函数 作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象reactive定义的响应式数据是“深层次的”内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作 template{{ name }}--{{ age }}--{{ xx }}br{{person}}button clickhandleClick点我/buttonbr/templatescriptimport {ref, reactive} from vueexport default {name: App,data() {return {xx: this.name}},setup() {let name lqzlet age ref(19)// const person ref({ // 内部包装成reactiveconst person reactive({name: 彭于晏,age: 88})function handleClick() {// console.log(age)// age.valueconsole.log(person)person.age}return {name, age, handleClick,person}}, } /script3.4 reactive对比ref 从定义数据角度对比 ref用来定义基本类型数据reactive用来定义对象或数组类型数据备注ref也可以用来定义对象或数组类型数据, 它内部会自动通过reactive转为代理对象从原理角度对比 ref通过Object.defineProperty()的get与set来实现响应式数据劫持。reactive通过使用Proxy来实现响应式数据劫持, 并通过Reflect操作源对象内部的数据。从使用角度对比 ref定义的数据操作数据需要.value读取数据时模板中直接读取不需要.value。reactive定义的数据操作数据与读取数据均不需要.value。 3.5 setup的两个注意点 setup执行的时机 在beforeCreate之前执行一次this是undefined。 setup的参数 props值为对象包含组件外部传递过来且组件内部声明接收了的属性。context上下文对象 attrs: 值为对象包含组件外部传递过来但没有在props配置中声明的属性, 相当于 this.$attrs。slots: 收到的插槽内容, 相当于 this.$slots。emit: 分发自定义事件的函数, 相当于 this.$emit。 3.6 计算属性与监视 1.computed函数 与Vue2.x中computed配置功能一致 写法 templatep姓input typetext v-modelperson.firstName/pp名input typetext v-modelperson.lastName/pp全名{{ person.fullName }}/pp全名修改input typetext v-modelperson.fullName/p/templatescriptimport {ref, reactive} from vue import {computed} from vueexport default {name: App,setup() {const person reactive({firstName: 刘,lastName: 亦非})// let fullName computed(() {// return person.firstName - person.lastName// })// 或者,传入箭头函数// person.fullNamecomputed(() {// return person.firstName - person.lastName// })// 修改传入配置项目person.fullName computed({get() {return person.firstName - person.lastName},set(value) {const nameArr value.split(-)person.firstName nameArr[0]person.lastName nameArr[1]}})return {person}}, } /script 2.watch函数 与Vue2.x中watch配置功能一致 两个小“坑” 监视reactive定义的响应式数据时oldValue无法正确获取、强制开启了深度监视deep配置失效。监视reactive定义的响应式数据中某个属性时deep配置有效。templateh2年龄是{{ age }}/h2button clickage点我年龄增加/buttonhrh2姓名是{{ person.name }}/h2button clickperson.name?点我姓名变化/buttonhrh2sum是{{ sum }},msg是{{ msg }}/h2button clicksum点我sum变化/button|button clickmsg?点我msg变化/button/templatescriptimport {ref, reactive} from vue import {watch} from vueexport default {name: App,setup() {const age ref(19)const person reactive({name: lqz,age: 20})//1 监听普通watch(age, (newValue, oldValue) {console.log(sum变化了, newValue, oldValue)})// 2 监听对象watch(() person.name, (newValue, oldValue) {console.log(person.name变化了, newValue, oldValue)})// 3 监听多个const sum ref(100)const msg ref(很好)watch([sum, msg], (newValue, oldValue) {console.log(sum或msg变化了, newValue, oldValue)})return {person, age, sum, msg}}, } /script 3.watchEffect函数 watch的套路是既要指明监视的属性也要指明监视的回调。 watchEffect的套路是不用指明监视哪个属性监视的回调中用到哪个属性那就监视哪个属性。 watchEffect有点像computed 但computed注重的计算出来的值回调函数的返回值所以必须要写返回值。而watchEffect更注重的是过程回调函数的函数体所以不用写返回值。//watchEffect所指定的回调中用到的数据只要发生变化则直接重新执行回调。 watchEffect(() {const x1 sum.valueconst x2 person.ageconsole.log(watchEffect配置的回调执行了)})3.7 生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子但有有两个被更名 beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子与Vue2.x中钩子对应关系如下 beforeCreatesetup()createdsetup()beforeMount onBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdated onUpdatedbeforeUnmount onBeforeUnmountunmounted onUnmounted 3.8 自定义hook函数 什么是hook—— 本质是一个函数把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 3.8.1 打点功能 templateh2点击的x坐标{{ point.x }},y坐标{{ point.y }}/h2/templatescriptimport {reactive} from vue import {onMounted, onBeforeUnmount} from vueexport default {name: Point,setup() {const point reactive({x: 0,y: 0})function getPoint(event) {console.log(event.pageX)console.log(event.pageY)point.x event.pageXpoint.y event.pageY}// 挂在完成开始执行onMounted(() {window.addEventListener(click, getPoint)})// 接除挂载时执行onBeforeUnmount(() {console.log(sss)window.removeEventListener(click, getPoint)})return {point}}, } /script templatedivbutton clickisShow!isShow点我显示隐藏/buttonPoint v-ifisShow/Point/div/templatescriptimport {ref, reactive} from vue import Point from ./components/Point.vue; import Demo from ./components/HelloWorld.vueexport default {name: App,components: {Demo, Point},setup() {const isShow ref(true)return {isShow}}, } /script3.8.2 使用hook实现打点 uesPoint.js import {onBeforeUnmount, onMounted, reactive} from vue;export default function () {let point reactive({x: 0,y: 0})function getPoint(event) {console.log(event.pageX)console.log(event.pageY)point.x event.pageXpoint.y event.pageY}// 挂在完成开始执行onMounted(() {window.addEventListener(click, getPoint)})// 接除挂载时执行onBeforeUnmount(() {console.log(sss)window.removeEventListener(click, getPoint)})return point }Point.vue templateh2点击的x坐标{{ point.x }},y坐标{{ point.y }}/h2/templatescriptimport usePoint from ../hooks/usePoint.js export default {name: Point,setup() {let point usePoint()console.log(point)return {point}}, } /script 10.toRef 作用创建一个 ref 对象其value值指向另一个对象中的某个属性。 语法const name toRef(person,name) 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展toRefs 与toRef功能一致但可以批量创建多个 ref 对象语法toRefs(person) templatedivh2姓名{{ name }}/h2h2年龄{{ age }}/h2button clickage改年龄/button| button clickname~改姓名/button/div/templatescriptimport {ref, reactive,toRefs} from vueexport default {name: App,setup() {const person reactive({name: lqz,age: 19})return {...toRefs(person)}}, } /script//对象展开语法let obj1 {foo: bar, x: 42}; let obj2 {foo: baz, y: 13}; let mergedObj {...obj1, ...obj2}; console.log(mergedObj)