m0_38066007的博客

使用 .jsx 格式文件 和 defineComponent引用自定义组件，传递属性基本使用child.jsx 组件的配置demo.jsx setup 函数父组件引用import demo from './components/demo.jsx'1...

定义pxToRem.js ，在mian.js 里引用const getFontSize = (fontSize) => { return parseInt(fontSize / 10 + '', 10) * 10;};// @ts-ignore((win, lib) => { const doc = win.document; const docEl = doc.documentElement; let metaEl = doc.querySelector('met.

Vue3 比 Vue2 有什么优势？描述 Vue3 生命周期如何看待 Composition API 和 Options API？如何理解 ref、toRef 和 toRefs?Vue3 升级了哪些重要的功能？Composition API 如何实现代码逻辑复用？Vue3 如何实现响应式？watch 和 watchEffect 的区别是什么？setup 中如何获取组件实例？Vue3 为何比 Vue2 快？Vite 是什么？Composition API 和 Rea

组件化响应式vdom 和 diff模板编译渲染过程前端路由Vue 响应式核心 API - Object.defineProperty (Vue3.0 启用 Proxy)Proxy 兼容性不好，且无法 polyfillObject.defineProperty 实现响应式监听对象，监听数组复杂对象，深度监听几个缺点1...

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') }

v-show 和 v-if 的区别为何 v-for 中要用key描述 Vue 组件生命周期 （有父子组件的情况）挂载阶段更新阶段销毁阶段Vue 组件如何通讯描述组件渲染和更新的过程双向数据绑定 v-model 的实现原理...

1// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个directives的选项：directives: { focus: { // 指令的定义 inserted: function (el) { el...

npm install vue-i18nsrc下新建目录zh-CN.tsconst zhLocale = require('element-ui/lib/locale/lang/zh-CN')export default { common: { save: '保存' }, systemParameter: { loading: '加载中...' }, ...zhLocale.default}en-US.tsconst en.

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数 实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom 对比虚拟dom，渲染到真实dom 组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3第一步: 模板到render在我们使用Vue的组件化进行开发应用的时候, 如果仔细的

插槽内容它允许你像这样合成组件：<navigation-link url="/profile"> Your Profile</navigation-link>然后你在<navigation-link>的模板中可能会写为：<a v-bind:href="url" class="nav-link"> <slot></slot></a>当组件渲染的时候，<slot>&l..

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳；vue中computer与watch区别：计算属性c

为了完整的了解整个机制，我们最好选择客户端compile的版本，也即Runtime + Compiler。在我们使用Vue-Cli初始化一个Vue项目的时候，会询问我们使用Runtime Only版本还是Runtime + Compiler版本。Runtime Only 使用该版本时，我们需要借助webpack的vue-loader工具来把.vue文件编译成JavaScript，体积比较小。 Runtime + Compiler 使用该版本时，...

答题思路：1.啥是响应式？2.为什么 Vue需要响应式？3.它能给我们带来什么好处？4. Vue的响应式是怎么实现的？有哪些优缺点？5.Vue3中响应式的新变化回答范例：1.所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。2. mvvm框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。3.以 vue为例说明，通过...

这道题考察大家对vue异步更新队列的理解答题思路：1.nextTick是什么2. 为什么需要它呢？用异步更新队列实现原理解释3.在什么地方使用它呢？4. 如何使用 nextTick5.说出源码实现1.官方定义Vue.nextTick([callback, context])在下次 DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法。获取更新后的 DOM。//修改数据vm.msg = 'Hello'// DOM 还没有...

路由守卫：全局守卫：router.beforeEachrouter.beforeResolverouter.afterEach路由独享守卫：beforeEnter组件内守卫：beforeRouteEnter beforeRouteUpdate(2.2 新增) beforeRouteLeave全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, f...

组件通信方式：props$emit / $on$children / $parent$attrs / $listenersprovide / injectref$rooteventbusvuex父子之间组件通信props$emit / $on$parent / $childrenref$attrs / $listeners兄弟之间组件通信$parent$rooteventbusvuex跨层级之间组件通信...

回答策略：1.首先给vuex下一个定义2.vuex解决了哪些问题，解读理念3.什么时候我们需要vuex4.你的具体用法5.简述原理，提升层级总结：1.vuex是状态管理库。它以全局方式集中管理应用的状态，并且可以保证状态变更的可预测性。2.vuex主要解决的就是多组件之间状态共享的问题。利用各种组件通信方式，虽然也能做到状态共享，但是往往需要多个组件之间保持状态的一致性，这种模式很容易出现问题，也会使程序变得复杂。vuex通过把组件的共享状态抽取出来，以全局单例模式...

根据尤大的PPT总结，Vue3.0改进主要在以下几点：更快虚拟DOM重写优化slots的生成静态树提升静态属性提升基于Proxy的响应式系统更小：通过摇树优化核心库体积更容易维护：TypeScript + 模块化更加友好跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、Android、iOS）一起使用更容易使用改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告更好的调试支持独立的响应化模块Composition API虚拟 .

答题思路：根据题目描述，这里主要探讨Vue代码层面的优化一、路由懒加载const router = new VueRouter({routes: [ { path: '/foo', component: () => import('./Foo.vue') } ]})二、keep-alive缓存页面<template><div id="app"> <keep-alive> <rou...

答题思路：此题涉及知识点很多，很难说清、说透，因为mvc、mvp这些我们前端程序员自己甚至都没 用过。但是恰恰反映了前端这些年从无到有，从有到优的变迁过程，因此沿此思路回答将十分清楚。Web1.0时代在web1.0时代，并没有前端的概念。开发一个web应用多数采用ASP.NET/Java/PHP编写，项目通常由 多个aspx/jsp/php文件构成，每个文件中同时包含了HTML、CSS、JavaScript、C#/Java/PHP代码，系 统整体架构可能是这样子的：这种架构的好处是简..

在vue的官网上写着大大的定义和特点：渐进式JavaScript框架易用、灵活和高效所以阐述此题的整体思路按照这个展开即可。渐进式JavaScript框架：与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易 于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使 用时，Vue 也完全能够为复杂的单页应用提供驱动。易用性vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要

源码分析1：组件定义src\core\global-api\assets.js源码分析2：组件化优点src\core\instance\lifecycle.jslifecycle.js - mountComponent() 组件、Watcher、渲染函数和更新函数之间的关系源码分析3：组件化实现构造函数，src\core\global-api\extend.js实例化及挂载，src\core\vdom\patch.js - createElm() ---...

aa

源码中找答案：src\core\vdom\patch.js - updateChildren()测试代码：<body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../../dist/vue.js"></script> &l...

源码中找答案：src\core\instance\state.js - initData()functioninitData(vm:Component){letdata=vm.$options.data/*先判断data的类型如果data类型是函数，则执行data函数，并将其结果作为data选项的值，否则使用用户设置的data*/data=vm._data=typeofdata==='fu...

源码中找答案 src/compiler/codegen/index.js genElement()exportfunctiongenElement(el:ASTElement,state:CodegenState):string{if(el.parent){el.pre=el.pre||el.parent.pre}//判断是否是静态节点if(el.staticRoot&&!el.static...

MVVM（Model–view–viewmodel）MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM优点编辑MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优...

理解Vue作为MVVM模式的实现库的2种技术 模板解析 数据绑定 模板解析: 实现初始化显示 解析大括号表达式 解析指令 数据绑定: 实现更新显示 通过数据劫持实现 2.原理结构图 3.详细教程Vue技术全家桶(45-62): http://www.gulixueyuan.com/course/255/tasks...

一、vue生命周期https://segmentfault.com/a/1190000011381906?utm_source=tag-newest二、父组件向子组件传递数据父组件：&lt;Test :text="text"&gt;&lt;/Test&gt;子组件：props:{text: String}三、子组件向父组件传递数据子组件：...