用媒体做响应式网站可以吗,html5网站修改,上海做運動网站的公司,网站备案没座机一、背景
vue2是指的2.X
vue3是指的3.0以及更新的版本#xff08;3.2版本在script标签里可以写setup#xff0c;极大的简化了开发#xff09;
本文对比两者区别。
二、官网
生命周期选项 | Vue.js
API 参考 | Vue.js
Vue.js - 渐进式 JavaScript 框架 | Vue.js
Vue.…一、背景
vue2是指的2.X
vue3是指的3.0以及更新的版本3.2版本在script标签里可以写setup极大的简化了开发
本文对比两者区别。
二、官网
生命周期选项 | Vue.js
API 参考 | Vue.js
Vue.js - 渐进式 JavaScript 框架 | Vue.js
Vue.js
Vue.js - The Progressive JavaScript Framework | Vue.js
三、区别
3.1、生命周期
生命周期选项 | Vue.js
生命周期变化较大需要认真学习。有vue2的基础很容易学会。
序号vue2详细1beforeCreate在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。2created在实例创建完成后被立即同步调用。在这一步中实例已完成对选项的处理意味着以下内容已被配置完毕数据侦听、计算属性、方法、事件/侦听器的回调函数。然而挂载阶段还没开始且 $el property 目前尚不可用。3beforeMount 在挂载开始之前被调用相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用。 4mounted 实例被挂载后调用这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上当 mounted 被调用时 vm.$el 也在文档内。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作可以在 mounted 内部使用 vm.$nextTick 5beforeUpdate 在数据发生改变后DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它比如移除手动添加的事件监听器。 该钩子在服务器端渲染期间不被调用因为只有初次渲染会在服务器端进行。 6updated 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。 当这个钩子被调用时组件 DOM 已经更新所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下你应该避免在此期间更改状态。如果要相应状态改变通常最好使用计算属性或 watcher 取而代之。 注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕可以在 updated 里使用 vm.$nextTick 该钩子在服务器端渲染期间不被调用。 7activated 被 keep-alive 缓存的组件激活时调用。 该钩子在服务器端渲染期间不被调用。 8deactivated 被 keep-alive 缓存的组件失活时调用。 该钩子在服务器端渲染期间不被调用。 9beforeDestroy 实例销毁之前调用。在这一步实例仍然完全可用。 该钩子在服务器端渲染期间不被调用。 10destroyed 实例销毁后调用。该钩子被调用后对应 Vue 实例的所有指令都被解绑所有的事件监听器被移除所有的子实例也都被销毁。 该钩子在服务器端渲染期间不被调用。 11 errorCaptured 2.5.0新增 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。vue2生命周期钩子-API — Vue.js序号vue3详细1onMounted() 注册一个回调函数在组件挂载完成后执行。 组件在以下情况下被视为已挂载 1、其所有同步子组件都已经被挂载 (不包含异步组件或 Suspense 树内的组件)。 2、其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时才可以保证组件 DOM 树也在文档中。 这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。 这个钩子在服务器端渲染期间不会被调用。 2onUpdated 在组件因为响应式状态变更而更新其 DOM 树之后调用。 父组件的更新钩子将在其子组件的更新钩子之后调用。 这个钩子会在组件的任意 DOM 更新后被调用这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM请使用 nextTick() 作为替代。 这个钩子在服务器端渲染期间不会被调用。 3onUnmounted 在组件实例被卸载之后调用。 一个组件在以下情况下被视为已卸载 1、其所有子组件都已经被卸载。 2、所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。 可以在这个钩子中手动清理一些副作用例如计时器、DOM 事件监听器或者与服务器的连接。 这个钩子在服务器端渲染期间不会被调用。 4onBeforeMount 在组件被挂载之前被调用 当这个钩子被调用时组件已经完成了其响应式状态的设置但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。 这个钩子在服务器端渲染期间不会被调用。 5onBeforeUpdate 在组件即将因为响应式状态变更而更新其 DOM 树之前调用。 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。 这个钩子在服务器端渲染期间不会被调用。 6onBeforeUnmount 在组件实例被卸载之前调用。 当这个钩子被调用时组件实例依然还保有全部的功能。 这个钩子在服务器端渲染期间不会被调用。 7onErrorCaptured 在捕获了后代组件传递的错误时调用。 错误可以从以下几个来源中捕获 1、组件渲染2、事件处理器3、生命周期钩子4、setup() 函数5、侦听器6、自定义指令钩子7、过渡钩子 这个钩子带有三个实参错误对象、触发该错误的组件实例以及一个说明错误来源类型的信息字符串。 你可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。注意不要让错误状态再次渲染导致本次错误的内容否则组件会陷入无限循环。 这个钩子可以通过返回 false 来阻止错误继续向上传递。请看下方的传递细节介绍。 8onRenderTracked 当组件渲染过程中追踪到响应式依赖时调用。 这个钩子仅在开发模式下可用且在服务器端渲染期间不会被调用。 9onRenderTriggered 当响应式依赖的变更触发了组件渲染时调用。 这个钩子仅在开发模式下可用且在服务器端渲染期间不会被调用。 10onActivated 若组件实例是 KeepAlive 缓存树的一部分当组件被插入到 DOM 中时调用。 这个钩子在服务器端渲染期间不会被调用。 11onDeactivated 若组件实例是 KeepAlive 缓存树的一部分当组件从 DOM 中被移除时调用。 这个钩子在服务器端渲染期间不会被调用。 12onServerPrefetch 在组件实例在服务器上被渲染之前调用。 如果这个钩子返回了一个 Promise服务端渲染会在渲染该组件前等待该 Promise 完成。 这个钩子仅会在服务端渲染中执行可以用于执行一些仅存在于服务端的数据抓取过程。 vue3生命周期钩子-组合式 API生命周期钩子 | Vue.js
问setup在哪个生命周期执行
答setup函数在beforeCreate生命周期钩子执行之前执行。
3.2、双向绑定数据的原理发生变化
vue2双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。
vue3使用了es6的proxyAPI对数据进行处理。
相比与vue2使用proxy API 优势有 defineProperty只能监听某个属性不能对全对象进行监听 可以省去for in 、闭包等内容来提升效率直接绑定整个对象即可 可以监听数组不用再去单独的对数组做特异性操作vue3可以检测到数组内部数据的变化。
3.3、vue3支持碎片Fragments
就是说可以拥有多个根节点
templatediv classcontainerdivfragments-1/div/divdiv classcontainer2divfragments-2/div/div
/template 3.4、Composition API
Vue2 与vue3 最大的区别是vue2使用选项类型apioptions api对比vue3合成型apicomposition api。 options api在代码里分割了不同得属性data,computed,methods等 composition api能让我们使用方法来分割相比于options api使用属性来分组这样代码会更加简便和整洁。
3.5、数据data
vue2是把数据放入data中 vue3就需要使用一个新的setup()方法此方法在组件初始化构造得时候触发。 使用以下三个步骤来建立反应性数据 1、从vue引入reactive 2、使用reactive() 方法来声明数据为响应性数据 3、 使用setup()方法来返回我们得响应性数据从而template可以获取这些响应性数据。
3.6、父子传参不同setup()函数特性
1、setup()函数接收两个参数props、context(包含attrs、slots、emit) 2、setup函数是处于生命周期beforeCreated和created俩个钩子函数之前 3、执行setup时组件实例尚未被创建在setup()内部this不会是该活跃实例得引用即不指向vue实例Vue为了避免我们错误得使用直接将setup函数中得this修改成了undefined 4、与模板一起使用时需要返回一个对象 5、因为setup函数中props是响应式得当传入新的prop时它将会被更新所以不能使用es6解构因为它会消除prop得响应性如需解构prop可以通过使用setup函数中得toRefs来完成此操作。 6、父传子用props,子传父用事件 Emitting Events。在vue2中会调用this$emit然后传入事件名和对象在vue3中得setup()中得第二个参数content对象中就有emit那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。 7、在setup()内使用响应式数据时需要通过 .value 获取
import { ref } from vue
const snow ref()
console.log(snow.value)
8、从setup() 中返回得对象上得property 返回并可以在模板中被访问时它将自动展开为内部值。不需要在模板中追加.value。
9、setup函数只能是同步的不能是异步的。
3.7、实例化
Vue2.x中new出的实例对象所有的东西都在这个vue对象上这样其实⽆论你⽤到还是没⽤到都会跑⼀遍这样不仅提⾼了性能消耗也⽆疑增加了⽤户加载时间。
⽽vue3.0中可以⽤ES module imports按需引⼊如keep-alive内置组件、v-model指令等等不仅我们开发起来更加的便捷减少 了内存消耗也同时减少了⽤户加载时间优化⽤户体验。
3.8、获取props
vue2在script代码块可以直接获取propsvue3通过setup指令传递
vue2console.log(‘props’,this.xxx)
vue3setup(props,context){ console.log(‘props’,props) }
最新版本的vue可能做出了修改可能已经不是这样了待研究
3.9、watchEffect
Vue3中除了watch还引入了副作用监听函数watchEffect用过之后我发现它和React中的useEffect很像只不过watchEffect不需要传入依赖项。
那么什么是watchEffect呢
watchEffect它会立即执行传入的一个函数同时响应式追踪其依赖并在其依赖变更时重新运行该函数。
computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并当任何你有用到的响应式依赖更新时该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行即{ immediate: true }。
3.10、组件通信
序号方式vue2vue31父传子propsprops2子传父 $emit() emits3 父传子 $attrsattrs4子传父$listeners无合并到了attrs5父传子provideprovide6子传父injectinject7子组件访问父组件$parent无8父组件访问子组件$children无9父组件访问子组件$refexpose ref10兄弟传值EventBusmitt
3.11、路由之间的区别
vue2和vue3的区别由浅入深_vue2和vue3区别_KinHKin(五年前端)的博客-CSDN博客
3.12、 状态管理
vue2vuex
vue3pinia
3.13、vue3.0和vue3.2的区别同为3.X版本进步很多
Vue3.0和Vue3.2的区别和使用_扬扬.的博客-CSDN博客
vue3.2 中 只需要在 script 标签上加上 setup 属性组件在编译的过程中代码运行的上下是 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值并包含在 setup() 返回对象中。 Vue3.0中的setup 是要在 export default 中使用 setup 属性。 Vue3.2在性能的改进在界面渲染的速度上更快依赖也大大减少了以及内存的使用量。
3.14、关于element vue2使用element ui
Element - The worlds most popular Vue UI framework
vue3使用element plus
一个 Vue 3 UI 框架 | Element Plus
四、欢迎交流指正关注我一起学习。
参考链接
Vue2与Vue3的区别你真的知道吗_哔哩哔哩_bilibili
vue进阶之路vue3.2-setup语法糖、组合式API、状态库Pinia归纳总结 - 代码天地
vue3.2、vue3和vue2不同之处_前端段的博客-CSDN博客_vue3 vue3.2
vue2和vue3的区别 - 简书
vue2和vue3的区别由浅入深_vue2和vue3区别_KinHKin(五年前端)的博客-CSDN博客
