vue基础总结 (全局组件和全局指令 v-model语法糖 )

**

全局组件:

在这里插入图片描述

如何让组件,设置为全局的组件:

在入口文件里面引入这个组件
Vue.compoent("组件名",     组件名)

**

全局指令

**
在这里插入图片描述
在一个简单的命令,重复使用的情况下
比如输入框的自动聚焦

Vue.durective(  "'focus'"  ,{
       inserted(el){
                    el.focus()
}}      )
使用自定义属性    >      定义事件类型   >     inserted  (el){el.focus()}

**

v-model 语法糖 (面试题)

**

在这里插入图片描述
****在父组件通过 子组件标签设置 v-model 传值给子组件,子组件props接收 在子组件设置自定义事件 this.$emit(“自定义事件”,数据)
的方式传回了 父组件 里面的子组件标签 这里已经不需要在父组件里面设置函数接受了
因为双向传导的方式 v-model 已经监听到了数据的变化

一个指令实现两个功能 : 父传子 子传父

在基础里面 父组件传值给子组件的方式:
在子组件的标签里面使用 :name: "变量名"
子传父的方式: 子组件定义点击事件 在methods里面 使用this.$emit( “自定义事件名字” ,数据 )
这样的话 两种方式的代码都会写在 子组件的标签里面 代码冗余 v-model 的使用就是由此而来****

在这里插入图片描述

在这里插入图片描述
**

vue2响应式的缺点

**
响应式: 数据 驱动试图

对象的新增没有响应式

在这里插入图片描述
虽然使用 this.obj.b=12 在调试工具里面 可以看到 在试图里面没有

**

如何让新增对象显示在视图里面

**

在这里插入图片描述

**

数组的部分属性没有响应式

**
在这里插入图片描述

在这里插入图片描述
这七个api会修改原数组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

**

事件循环 eventloop - 面试

**
js运行在宿主环境中。

宿主环境有: 浏览器, nodejs

提到事件循环时,是指宿主环境的事件循环,而不是js中的事件循环。为啥? 我们常见的事件,点击事件,鼠标事件等等是不是在浏览器中提到的?

浏览器本身是一个复杂的系统,它要做的事情非常多,例如: 执行js代码,请求图片资源,解析css,渲染页面,响应鼠标的点击等等。在实现层面,浏览器内部会用不同的功能模块去完成不同的事情。这些不同的模块就体现为进程。

在这里插入图片描述
进一步把进程进行划分:

  1. 主进程。用来协调控制其他子进程。
  2. GPU进程。用于3D绘制等。
  3. 渲染进程。就是我们说的浏览器内核,负责具体页面的渲染,脚本执行,事件处理等。浏览器的每个tab页背后就有一个渲染进程。

进程这个单位还是比较大,它进一步拆分多个线程。可以理解为一个页面上的事还是比较多,要多找些小弟来完成。具体来说,一个渲染进程包括:

  1. 主线程。统一调度其他线程
  2. GUI渲染线程。负责渲染页面,布局和绘制。与JS引擎互斥。
  3. JS引擎线程。负责处理解析和执行javascript脚本程序。与GUI渲染线程互斥的
  4. 事件触发线程。用来控制事件循环(鼠标点击、setTimeout、ajax等)。当事件满足触发条件时,将事件放入到JS引擎所在的执行队列中。
  5. setInterval与setTimeout所在的线程。定时任务并不是由JS引擎计时的,是由定时触发线程来计时的。计时完毕后,通知事件触发线程
  6. 异步http请求线程。浏览器有一个单独的线程用于处理AJAX请求,当请求完成时,若有回调函数,通知事件触发线程。
  7. io线程。用来接收其他进程的消息。

每个渲染进程(一个tab页)都有一个主线程,并且主线程非常繁忙,既要处理 DOM,又要计算样式,还要处理布局,同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行,这就需要一个系统来统筹调度这些任务,这个统筹调度系统就是消息队列和事件循环。

任务有很多,人只有一个
在这里插入图片描述

**

微任务

**

在这里插入图片描述
执行逻辑: 立刻执行 微任务 宏任务
主进程会区分 : 代码执行的优先级 一般 立刻执行 微任务 宏任务会对上面的三种情况进行排序
执行栈会首先执行 立刻执行的代码 识别微任务 添加到队列 再去识别宏任务 添加完以后 开始执行 微任务 执行 这样一次往下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

重上倒下 开始筛选 立刻执行 peomise 前半部分是立即执行的函数 后半部分是微任务异步 继续往下筛选 队列添加完毕以后 开始执行微任务 微任务执行完毕以后 开始执行宏任务

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值