完整版推荐在线阅读 https://interview2.poetries.top/
MVVM是Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。
MVVM is an acronym for Model-View-ViewModel, which transforms the Controller in the MVC into a ViewModel. Model is a data model, View represents the UI component, and ViewModel is a bridge on the View and Model levels, and the data is tied to the WebModel layer and automatically rewrites the data to the page, and the view changes will inform the view Model layer to update the data.
- MVVM 是 Model-View-ViewModel 的缩写
- Model: 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为
- View: 用户操作界面。当ViewModel对Model进行更新的时候,会通过数据绑定更新到View
- ViewModel: 业务逻辑层,View需要什么数据,ViewModel要提供这个数据;View有某些操作,ViewModel就要响应这些操作,所以可以说它是Model for View.
- 总结: MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。MVVM 在使用当中,利用双向绑定技术,使得 Model 变化时,ViewModel 会自动更新,而 ViewModel 变化时,View 也会自动变化。
答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后
Response: A total of 8 phases pre/post-create, pre/post-load, pre/post-update, pre/post-destruction
生命周期是什么
What's the life cycle?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是Vue的生命周期
Vue example has a full life cycle, which is to create, initialize data, prepare templates, mount Dom-> Render, Update-> Rendering, Unmounting, which we call the life cycle of Vue
各个生命周期的作用
生命周期 | 描述 |
---|---|
beforeCreate | 组件实例被创建之初,组件的属性生效之前 |
created | 组件实例已经完全创建,属性也绑定,但真实dom还没有生成,$el还不可用 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子 |
beforeUpdate | 组件数据更新之前调用,发生在虚拟 DOM 打补丁之前 |
update | 组件数据更新之后 |
activited | keep-alive专属,组件被激活时调用 |
deadctivated | keep-alive专属,组件被销毁时调用 |
beforeDestory | 组件销毁前调用 |
destoryed | 组件销毁后调用 |
由于Vue会在初始化实例时对属性执行转化,所以属性必须在对象上存在才能让将它转换为响应式的。Vue提供了方法用来触发视图更新
Since Vue will convert properties at the time of initialization, the properties must exist on the object in order to convert them to responsive. Vue provides the method to trigger the view update.
什么是vue生命周期?
What's the life cycle?
- 答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
vue生命周期的作用是什么?
What's the role of the life cycle?
- 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
vue生命周期总共有几个阶段?
How many stages of the life cycle are there?
- 答:它可以总共分为个阶段:创建前/后、载入前/后、更新前/后、销毁前/销毁后。
第一次页面加载会触发哪几个钩子?
What kind of hooks would be triggered by the first page load of DOM 渲染在哪个周期中就已经完成? What cycle does the strong-DOM render complete? 父组件与子组件传值 parent and sub-assemblies pass 父组件传给子组件:子组件通过方法接受数据; The parent-to-child component: the sub-assembly receives data by method; 非父子组件间的数据传递,兄弟组件传值 ,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适(虽然也有不少人推荐直接用,具体来说看需求) It's an event center, which is a transit station that can be used to transmit events and receive them. 首页可以控制导航跳转,,等,一般用于页面的修改。一些需要登录才能调整页面的重定向功能。 The home page controls the navigational jump, etc., which is usually used for page changes. Some items require login to adjust the page's redirection function. :项目特别复杂的时候,可以让每一个模块拥有自己的、、、,使得结构非常清晰,方便管理 : When the project is particularly complex, it allows each module to have its own, and it makes the structure very clear and easy to manage 将当前组件的修改为 Modify the current component to keep-alive可以实现组件缓存,当组件切换时不会对当前组件进行卸载 Keep-alive allows component caches, and the current component will not be unmounted when the component is switched 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染 For example, with a list and a detail, the user often performs opening details = > returns list = > opens details... so that the list and details are all high-frequency pages, so that the list component can be cached so that each time the user returns to the list, it can quickly rewrite from the cache instead of repainting. 提供一个在页面上已存在的 元素作为 实例的挂载目标.可以是 CSS 选择器,也可以是一个 实例, Provides a mount target for an example of an element that already exists on the page. This can be a CSS selection or an example. 问题一:构建的 vue-cli 工程都到了哪些技术,它们的作用分别是什么? Question I: What technologies are available for the build-up of the vue-cli project and what are their respective roles? 问题二:vue-cli 工程常用的 npm 命令有哪些? Question II: What are the Npm commands that are commonly used in the vue-cli project? 在浏览器上自动弹出一个 展示 工程打包后 、、 文件里面所包含代码的页面。可以具此优化 生产环境部署的静态资源,提升 页面 的加载速度 Automatically popup on the browser a page containing the code in the file after display project wrapping. This optimizes the static resources deployed in the production environment and increases the loading speed of the page 可以让我们在下次 DOM 更新循环结束之后执行延迟回调,用于获得更新后的 Allows us to perform a delayed return at the end of the next DOM update cycle, which will be used to get the update. 声明式(标签跳转) statement (label jump) 编程式( js跳转) 其基本实现原理 的实现,主要就是把 的组件输出成一个完整 , 就是干这事的 The main thing to do is to produce the components into one complete, that's what this is all about. 实现时,主要如下 At the time of implementation, the main elements were as follows: 可以简单理解成以下步骤: It can be understood briefly as the following steps: 用 工具。 大意是通过 来查看每个函数的调用时常,定位出哪个函数的问题,从而能判断哪个组件出了问题 Use the tool. This means that you can see how often each function is called, and you can find out which function is wrong, so you can determine which component is wrong. 使用了v-if的时候,如果值为false,那么页面将不会有这个html标签生成。 v-show则是不管值为true还是false,html元素都会存在,只是CSS中的display显示或隐藏 When v-if is used, if the value is false, the page will not generate this html tab. v-show, if the value is True or false, the html element will exist, except that the display in the CSS shows or hides it. 语法:简写: Syntax: Brief: Object.defineProperty() 的问题主要有三个: Subject.definineProperty() has three main questions: Proxy 在 ES2015 规范中被正式加入,它有以下几个特点 Proxy was formally added to the ES2015 Code, which has the following features: 除了上述两点之外,Proxy 还拥有以下优势: In addition to the above two points, Proxy has the following advantages: 全局守卫 Global Guard vue-router全局有三个守卫 There are three guards on the whole of the vue-rooter. 路由独享守卫 >.................................................................................................... 如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫 If you don't want a full-scale guard, you can set up a separate guard for certain routes. 路由组件内的守卫 Guards in 组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯 There are three kinds of communication between components: the father, the father, the brother. 1. 父组件给子组件传值 1. . 子组件vue模板child.vue: Subpart vue template Child.vu: 2. 子组件向父组件通信 2. Subcomponents communicate to parent 父组件向子组件传递事件方法,子组件通过触发事件,回调给父组件 Parent component transmits the event method to the sub-assembly, and the sub-assembly returns to the parent-assembly by triggering the event 父组件vue模板father.vue: Father template: 子组件vue模板child.vue: Subpart vue template Child.vu: 3. 非父子, 兄弟组件之间通信 3. Communication between non-fathers, brothers and sisters vue2中废弃了broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。Bus.js可以是这样: The method of broadcasting and distributing the events in Broadcast is abandoned in vue2. Fathers and children can use props and dollarsmit (). How to achieve communication between non-father and son components can be achieved, for example, by using a vue example of Bus as a medium, by introducing Bus among brothers to communicate with each other, and then by calling each of the Bus events to trigger and listen separately. Bus.js can be: 在需要通信的组件都引入Bus.js: Bus.js are introduced to all components requiring communication: 另一个组件也import Bus.js 在钩子函数中监听on事件 The other component also reports Bus.js listening to the on-event in the hook function. Vue与AngularJS的区别 Vue与React的区别 vuex的使用借助官方提供的一张图来说明: The use of vuex is illustrated by an official map: Vuex有5种属性: 分别是 state、getter、mutation、action、module; Vuex has five attributes: state, getter, mutilation, action, module; state 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据 Use a single state tree, that is, each application will contain only one store instance, but there is no conflict between a single state tree and modularization. The data state stored does not directly modify the data contained therein. mutations 定义的方法动态修改Vuex 的 store 中的状态或数据。 Defines the methodological dynamics that modify the status or data in the store of Vux. getters 类似vue的计算属性,主要用来过滤一些数据 Calculator properties similar to vue used mainly to filter some data action 一般面试官问到这里vue基本知识就差不多了, 如果更深入的研究就是和你探讨关于vue的底层源码;或者是具体在项目中遇到的问题,下面列举几个项目中可能遇到的问题: The general interviewer asks about the basics of vue here, and if a more in-depth study is to discuss with you the bottom source code for vue, or the problems encountered in specific projects, the following are some of the problems that may be encountered in several projects: computed: watch: 小结: 利用Object.defineProperty劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,在vue3.0中通过Proxy代理对象进行类似的操作。 Using the Accessor of the object that is hijacked by Project.defineProperty, we can take a change in the attribute value and then follow up on the change and perform a similar operation in vue3.0 via Proxy proxy. Vue 采用数据劫持结合发布—订阅模式的方法,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 Vee uses data hijacking in conjunction with the release-subscription mode to hijack setters of each attribute via Project.defineProperty() to send messages to the subscriber when data changes occur, triggering the corresponding listening echoes. 订阅者是 和 之间通信的桥梁,主要做的事情 The subscriber is the bridge between the communication, the main thing. Vue3.x响应式数据原理 Vue3.x Responsive Data Rationale 改用P替代。因为P可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。 Replace with P. Because P can directly listen to changes in objects and arrays, and there are as many as 13 interception methods. And as a new standard, performance will be optimized by the continuous focus of the browser vendor. 只会代理对象的第一层,那么又是怎样处理这个问题的呢? It's only the first level of representation, so how do we deal with this? 判断当前返回值是否为,如果是则再通过方法做代理, 这样就实现了深度观测。 To determine whether the current return value is or, if it is, to act as an agent by means of a method, thus achieving an in-depth observation. 监测数组的时候可能触发多次get/set,那么如何防止触发多次呢? How to prevent multiple triggers when monitors the arrays? may trigger multiple hits/sets. 我们可以判断是否为当前被代理对象自身属性,也可以判断旧值与新值是否相等,只有满足以上两个条件之一时,才有可能执行 We can judge whether it is the properties of the currently represented object or whether the old value is equal to the new value, and only if one of these two conditions is met will it be possible to execute it. 本质上是语法糖,在内部为不同的输入元素使用不同的属性并抛出不同的事件 Essentially syntax sugar, using different properties for different input elements inside and throwing different events 所以我们可以v-model进行如下改写: 虽然避免了组件间样式污染,但是很多时候我们需要修改组件中的某个样式,但是又不想去除属性 Although contamination of inter-assembly styles has been avoided, in many cases we need to modify one of the styles in the components, but we don't want to remove properties. 本质是一个具备缓存的,依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时,在模板中放入过多逻辑会让模板难以维护,可以将复杂的逻辑放入计算属性中处理 The essence is a cache where the dependent properties change and the view is updated. The calculation scenario is used to calculate the more expendable properties. When the expression is too complicated, placing too much logic in the template makes it difficult to maintain the template and can treat complex logic in the computational properties. 没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听,如果没有写到组件中,不要忘记使用手动注销 There's no cache, more of an observational function, so you can listen to some data for echoing. When we need to listen to the properties in the object in depth, you can open the option, so you can listen to each one of the objects. This leads to performance problems, optimized listening in string form, and if not written into the component, don't forget to write off manually. 导航守卫 全局前置守卫 Navigation guard. All ahead guard. 路由独享的守卫 你可以在路由配置上直接定义 守卫 You can define the route directly on the route configuration, the guard. 组件内的守卫你可以在路由组件内直接定义以下路由导航守卫 The guards in the component can directly define the following routes within the routed component. 当时的思路是头部(Header)一般分为左、中、右三个部分,分为三个区域来设计,中间为主标题,每个页面的标题肯定不同,所以可以通过vue props的方式做成可配置对外进行暴露,左侧大部分页面可能都是回退按钮,但是样式和内容不尽相同,右侧一般都是具有功能性的操作按钮,所以左右两侧可以通过vue slot插槽的方式对外暴露以实现多样化,同时也可以提供default slot默认插槽来统一页面风格 The idea at the time was that head (Header) was generally divided into three parts, left, centre and right, and designed into three areas, with a middle heading, each of which must have a different title, so that exposure could be configurable in the form of vue props, most of the pages on the left might be backwards buttons, but styles and content were not the same, the right were typically functional operating buttons, so the left and right sides could be exposed to diversity through vue slot slots, while also providing the default slot slots to harmonize page styles. Proxy的优势如下: The advantages of Proxy are as follows: Object.defineProperty的优势如下: Object.definineProperty has the following advantages: 兼容性好,支持IE9 Compatibility good. Support IE9. 响应式系统简述: Responsive System Brief description: 现代前端框架有两种方式侦测变化,一种是pull一种是push There are two ways to detect changes in the modern front-end framework, one Pull and the other Push. 考点: Vue的变化侦测原理 Test point: Vue's change detection principles 前置知识: 依赖收集、虚拟DOM、响应式系统 Pre-knowledge: Reliance on collection, virtual DOM, responsive system 根本原因是Vue与React的变化侦测方式有所不同 The underlying reason is that Vue and React are different in their methods of detection. diff程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了,就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾. The diff process can be summarized as: the old Ch and the new Ch have two first-end variables, StartIdx and EndIdx, each comparing each other, and there are four methods of comparison. If the four comparisons are not matched, if they are set, they are compared with Key, and in the process the variables are drawn in the middle, once StartIdx> EndIdx shows that at least one of the old Ch and NewCh have passed through, the four methods of comparison are the beginning, end, end, end, old, new, old. 准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug. Accuracy: If not key, the vue chooses to repeat the node (Vue's in-situ update policy), which leads to the retention of the status of the previous node, creating a series of bugs. 代码层面: Code level: Webpack 层面优化: 可以让我们在下次 更新循环结束之后执行延迟回调,用于获得更新后的 We'll be able to do a late return at the end of the next update cycle for the update. 主要使用了宏任务和微任务。根据执行环境分别尝试采用 Mainly macro- and micro-tasks are used. 定义了一个异步方法,多次调用会将方法存入队列中,通过这个异步方法清空当前队列 A step method has been defined, and multiple calls will place it in the queue, clearing the current queue through this step. 使用了函数劫持的方式,重写了数组的方法,将中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组api时,可以通知依赖更新。如果数组中包含着引用类型,会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。 The method of rewrites the arrays, rewrites the arrays, rewrites the prototypes of the arrays, pointing to the prototypes of the arrays that you define. This way, when calling the arrays api, you can notify that you rely on updates. If the arrays contain reference types, the reference types in the arrays are monitored again over time. This allows for monitoring changes in the arrays. 接口请求一般放在中,但需要注意的是服务端渲染时不支持,需要放到中 Interface requests are usually in the center, but what needs to be noted is that the service is not supported when rendering and needs to be in the center. 一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间d不冲突,data必须是一个函数 In essence, these examples are used in the same construction function. In the case of objects, the object is the type of reference, which affects all the examples. So, in order to ensure that there is no conflict between the different examples of components, data must be a function. 本质就是一个语法糖,可以看成是方法的语法糖。 可以通过属性的和属性来进行自定义。原生的,会根据标签的不同生成不同的事件和属性 The essence is a syntax sugar, which can be seen as a method of syntax sugar. It can be custom-defined by attributes and attributes. Natives generate different events and properties depending on the label. 原生事件绑定是通过绑定给真实元素的,组件事件绑定是通过自定义的实现的 Native event binding is done by binding the real elements, and component event binding is done by custom. 简单说,的编译过程就是将转化为函数的过程。会经历以下阶段: Simply put, the compilation process is the process by which you convert into a function. The following stages are experienced: 生成树 Generate Tree 优化 Optimize 首先解析模版,生成语法树(一种用J对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析,遇到标签、文本的时候都会执行对应的钩子进行相关处理。 The template is first parsed to produce a syntax tree (a form that describes the entire template in the form of a J object). The template is parsed using a large number of regular expressions, and the corresponding hooks are processed when encountered with labels and text. 的数据是响应式的,但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化,对应的DOM也不会变化。那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。 The data are responsive, but not all of the data in the template are responsive. Some of the data do not change after the first rendering, and the corresponding DOM does not change. So the optimisation process is to go through the AST trees and mark the tree nodes in accordance with the relevant conditions. These marked nodes (static nodes) can be compared to them, and they are highly optimized to the templates when they run. 编译的最后一步是将优化后的树转换为可执行的代码 The final step in compiling is to convert the optimized tree into an executable code. 简单来说,算法有以下过程 In short, the algorithms have the following processes: 同级比较,再比较子节点 Compare the same level and compare the sub-nodes. 先判断一方有子节点一方没有子节点的情况(如果新的没有子节点,将旧的子节点移除) To judge first whether one of the parties has a sub-point or not. (If the new one does not have a sub-point, remove the old sub-point.) 比较都有子节点的情况(核心) There's a subnominal situation in the comparison (core) 递归比较子节点 Recursive Comparison of Subnodes 正常两个树的时间复杂度是,但实际情况下我们很少会进行跨层级的移动,所以将进行了优化,从,只有当新旧都为多个子节点时才需要用核心的算法进行同层级比较。 The time complexity of the normal two trees is that, in practice, we rarely move across layers, so it will be optimized so that the same level of comparison needs to be done using core algorithms only when both old and new are multiple subpoints. 的核心算法采用了双端比较的算法,同时从新旧的两端开始进行比较,借助值找到可复用的节点,再进行相关操作。相比的算法,同样情况下可以减少移动节点次数,减少不必要的性能损耗,更加的优雅 The core algorithm uses a two-end comparison algorithm, starting with the old and new ends, where values can be used to find reusable nodes and then perform related operations. In the same case, the number of mobile nodes can be reduced, unnecessary performance losses reduced, and more elegant. 在创建时就确定其类型,以及在的过程中采用位运算来判断一个的类型,在这个基础之上再配合核心的算法,使得性能上较有了提升 At the time of creation, the type was determined and, in the process, the type was determined using biting, on the basis of which the core algorithms were recombined, resulting in a higher level of performance. key的作用是尽可能的复用 DOM 元素 The role of 加载渲染过程 ->->->->->- >-> 子组件更新过程 Subcomponent Update ->->-> 父组件更新过程 -> 销毁过程 destruction process ->->-> 也就是服务端渲染,也就是将在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端 This is the service-end rendering, which means that the task of rendering labels to HTML on the client is done on the service-end, and then the html is returned directly to the client. 有着更好的、并且首屏加载速度更快等优点。不过它也有一些缺点,比如我们的开发条件会受到限制,服务器端渲染只支持和两个钩子,当我们需要一些外部扩展库时需要特殊处理,服务端渲染应用程序也需要处于的运行环境。还有就是服务器会有更大的负载需求 It has the advantage of being better and with a faster first-screen load. But it also has a number of disadvantages, such as limited development conditions, server-end rendering support only and two hooks, special handling when we need some external extension libraries, service-end rendering applications in the operating environment. And there's a greater load demand on the server. 编码阶段 encoded SEO优化 打包优化 Pack 用户体验 User experience 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启压缩等。 You can also use caches (customer, service) optimization, service start compression, etc. vuex 的 getter 是什么? What's the getter for vuex 的 mutation 是什么? What's the motisation of vuex 的 action 是什么? What's the action for 面对复杂的应用程序,当管理的状态比较多时;我们需要将的对象分割成模块()。 In the face of complex applications, when more states are managed; we need to split objects into modules (). 如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 的 里如果被其他地方复用,请将请求放入 里,方便复用,并包装成 返回 If the requested data is not intended to be used by other components, it is not required to be used only in the requested components. If the requested data is reused elsewhere, please insert the request in to facilitate reuse and package it back into the returns. 将当前组件的修改为 Modify the current component to 可以 Yeah. v-on 常用修饰符 v-on Common modifier babel-polyfill插件 Babel-Polyfill Plugin 以下方法调用会改变原始数组:, , , , , , , The following calls change the original array:,,,,,,,,,,,,, 在 Yes. 注意 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 替换掉 Note that there is no commitment that all the sub-components will be mounted together. If you want to wait until the entire view is rendered, you can replace them. 第一次加载会触发哪几个钩子 Which hooks will be triggered by the first load of 会触发 , , , It triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers, it triggers. , 变量 , variable
相比于其他模板引擎(, 等),最终要实现的目的是一样的,性能上可能要差点
vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用,可以将组件中用到的数据存储在 State 中,并在 Action 中封装数据读写的逻辑。这时候存在一个问题,一般什么样的数据会放在 State 中呢? 目前主要有两种数据会使用 vuex 进行管理:
1、组件之间全局共享的数据
2、通过后端异步请求的数据
比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态
computed适用于计算比较消耗性能的计算场景
然后这个组件你可以作用到Vue.component这个全局注册方法里还可以在任意vue模板里使用组件。
也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件。
快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度,的时间复杂度仅仅为.
fast: Key's uniqueness can be fully exploited by Map data structures, which are only time-complex compared to the time-complicated search-through.
注册有任何问题请添加 微信:MVIP619 拉你进入群
打开微信扫一扫
添加客服
进入交流群
发表评论