程序媛的梦工厂

computed和watch的区别，computed原理，源码解析

vue生命周期函数

scoped实现原理。

vue3 hooks

vue面试常见问题

常见问题actions为什么可以处理异步任务，和mations有什么区别当我们修改数据，只能通过mutation修改stateactions里面可以做异步操作，但是并不是直接修改数据，提交的是mutations里面的方法，多个异步任务可以在actions中触发，dispatch(‘xxx’)返回的是一个PromiseMutation 为什么必须是同步函数？如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。比如里面是异步任务，那么在

vue 数据双向绑定

通过有限状态机会生成一些token，再通过从上到下扫描token，借用栈，生成一个AST树。compiler过程就是把源代码（template）转换为目标代码（render）该模版主要包含状态为开始标签状态，文本状态，结束标签状态，当前处理的只能是一个状态。官方意思是：有限个状态以及在这些状态之间的转移和动作等行为的数据计算模型。

在源码中有一个函数为，其中就是通过判断两个vnode的type和key进行判断，如果这两个属性相同，那么这两个vnode就是相同，所以。源码在packages/runtime-core/src/renderer.ts的patchKeyedChildren()函数。3、新节点 > 旧节点。4、旧节 > 新节点。

解释：如果shapFlag本身值为8，type为1的话，那么转换为二进制（js都是32位）那就是。解释：如果shapFlag本身值为8，type为1的话，那么转换为二进制（js都是32位）那就是。结果为： 00000000 00000000 00000000 00000000。结果为： 00000000 00000000 00000000 00001001。按位进行运算，如果两个都为为1那就是1，否则为0，所以结果为。按位进行运算，如果有一个为1那就是1，所以结果为。

vue是一种声明式范式编程，使用vue者只需要告诉其想要什么结果，无需关心具体实现（vue内部做了，底层是利用命令式范式）

webpack-dev-server和vue-cli-service serve的区别

处理组件配置项初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 - vm.$options 选项中，以提高代码的执行效率初始化组件实例的关系属性，比如 parent、parent、children、root、root、refs 等处理自定义事件调用 beforeCreate 钩子函数初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行浅层的响.

相同点：都是虚拟dom+diff算法将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。不允许子组件改变父组件传来的props值区别：模板渲染的方式不同，react是jsx，react是拓展的html语法框架本质不相同，vue是mvvm，react是前端组件化框架数据流的不同，vue是通过v-model进行双向数据流，react是单向数据流，一般通过setState/onChangediff算法有区别...

前言：初始化一个vue的项目，很多人会下载一个vue的脚手架，通过脚手架快速初始化一个项目一、初始化流程1、npm install -g @vue/cli 下载一个脚手架2、vue create xxx 脚手架创建一个名为xxx的项目3、进行项目配置选择最后一个手动配置选择项目所需要的依赖版本号以及其他配置单独保存一个文件还是都保存到package.json中4、进入项目，安装配置、运行项目cd xxxnpm installnpm run serve二、脚手架原理1、.

一、响应式原理api的改变vue2使用的为defineProperty，vue3使用的是proxy1、defineProperty：在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象只代理对象上的某个属性对象上定义新属性时，无法监听（为弥补这个问题，增加额外set、delete方法）数组新增删除修改时，无法监听只有2个get, set方法2、proxy：用于定义基本操作的自定义行为Proxy代理整个对象，所以新增的属性也会被监听可以弥补defineProperty的

一、使用方法及源吗使用方法// postInfo为每层下钻岗位的id selectedName为XXX岗位名称，也就是最后需要显示的岗位信息 url为获取岗位信息的url// postInfo: [111,222,333], selectedName: '皮草运营商', url: "xxx.findxxx"<origanizeCascader v-model="postInfo" :selected-name.sync="selectedName" url="xxx.findx

下载resize-detector包。resizeChart.jsimport {debounce} from '~/common/util.js';import {addListener, removeListener} from 'resize-detector';export default { methods: { chartResizeBind(elRefKey, chartInstanceKey) { if (!this['__resize

tree-shaking：剔除没用的代码vue2.0 -> vue3.0性能提升源码升级支持ts新特性使用vue-cli创建vue3.0的项目后，vue3.0 main.jsvue2.0 main.jsh 是渲染函数一、setup数据、方法、生命周期钩子函数等返回值：对象函数（渲染函数）vue2可以访问到vue2的属性和方法，但是vue3不能访问vue2的值。setup 不可以使用async二、ref函数let name = ref('ddrb')

一、背景在写业务组件时，插槽可以说是起着至关重要的地位，在业务组件中使用<slot></slot>占坑，在父组件中调用业务组件，其可以传任何东西，包括HTML等。二、分类及使用方法1. 基础插槽//parent.vue<child> hello {{word}} //这里所有的内容都会被渲染到slot标签位置</child>//child.vue<a href="#"> <slot></slot>&lt