电子商务网站建设视频教程,企业网站界面,活动策划,app制作网站制作完目录 29.vue2.0和vue3.0区别#xff1f;
30.事件中心的原理
31.使用基于token的登录流程
32.防抖和节流
防抖#xff08;debounce#xff09;
节流#xff08;throttle#xff09; 29.vue2.0和vue3.0区别#xff1f;
1.由选项API转变为组合API。
2.vue3将全局配置…目录 29.vue2.0和vue3.0区别
30.事件中心的原理
31.使用基于token的登录流程
32.防抖和节流
防抖debounce
节流throttle 29.vue2.0和vue3.0区别
1.由选项API转变为组合API。
2.vue3将全局配置挂在了app实例上而不是构造函数上好处是应用之间的配置互不影响。
//vue2的全局config配置是直接挂在Vue构造函数上的
//例如
Vue.config.errorHandler (err)console.log(err)
//vue3的全局api是在当前应用实例上修改的不会影响其他应用
//例如
const app1 createApp(AppComponent1)
const app2 createApp(AppComponent2)
app1.config.errorHandler.(err)console.log(err,app1)
app2.config.errorHandler.(err)console.log(err,app2)
3.vue3为了减小打包体积将很多方法都采用了具名导出的方式如 createApp、nextTick等这使得初始化实例的方式也有所区别。
4.需要注意的是setup返回的变量都是Ref类型修改ref的值需要修改ref.value。
5.在setup中reactive可以为我们集中定义属性。
6.computed接收一个函数,该函数的返回值作为计算属性的值。
7.提供了依赖和注入(provide、inject)。
8.路由写法的差别
vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的大家都知道setup中组件实例已经创建是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的此时组件还未创建所以是无法用在setup中的如果想在setup语法糖中使用则需要再写一个script 如下
scriptexport default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},};
/script
script
import { defineComponent } from vue
import { useRoute, useRouter } from vue-router
export default defineComponent({beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next){//离开当前的组件触发next() }),beforeRouteLeave((to, from, next){//离开当前的组件触发next() }),setup() {const router useRouter()const route useRoute()const toPage () {router.push(xxx)}//获取params 注意是routeroute.params//获取queryroute.queryreturn {toPage}},
});
/script
9.生命周期:vue3提供了在setup中使用的生命周期函数。
/*生命周期函数对应表beforeCreate - 与setup并行created - 与setup并行beforeMount - onBeforeMountmounted - onMountedbeforeUpdate - onBeforeUpdateupdated - onUpdatedbeforeDestroy - onBeforeUnmountdestroyed - onUnmounted*/
10.Vue3 把实现响应式原理的Object.defineProperty 换成了 Proxy。
30.事件中心的原理
应用场景 跨多层父子组件通信 兄弟组件通信
Vue 通过事件发射器接口执行实例实际上你可以使用一个空的 Vue 实例原理其实就是发布订阅。
可以通过单独的事件中心管理组件间的通信
// 将在各处使用该事件中心 // 组件通过它来通信 var eventHub new Vue()
然后在组件中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。
31.使用基于token的登录流程
使用基于Token 的身份验证方法大概的流程是这样的 1. 客户端使用用户名跟密码请求登录
2. 服务端收到请求去验证用户名与密码
3. 验证成功后服务端会签发一个Token再把这个 Token 发送给客户端
4. 客户端收到Token 以后可以把它存储起来比如放在 Cookie 里或者 localStorage 里
5. 客户端每次向服务端请求资源的时候需要带着服务端签发的Token
6. 服务端收到请求然后去验证客户端请求里面带着的Token如果验证成功就向客户端返回请求的数据
32.防抖和节流
防抖debounce
所谓防抖就是指触发事件后在 n 秒内函数只能执行一次如果在 n 秒内又触发了事件则会重新计算函数执行时间。
节流throttle
所谓节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。 应用场景:input mousemove scroll resize 目的:减少触发的频度
