\n
\n \n

\n\n\n```\n\n\n### vue实现todo-list\n```html\n\n

\n
\n \n

{{item}}

\n\n\n```\n\n### 两者之间的区别\n- 数据和视图分离(开放封闭原则：扩展开放，修改封闭)\n- 数据驱动视图\n\n\n### 对mvvm的理解\n具体的理解自己再去整理\n\nMVVM框架的三大要素： \n响应式、模板引擎、渲染\n\n\n## 响应式的实现\n修改data属性之后，立马就能监听到。 \ndata属性挂在到vm实例上面。\n\n有下面的一个问题，我们是如何监听属性的获取和属性的赋值的。\n```javascript\nlet obj = {\n name: 'yanle',\n age: 25\n};\nconsole.log(obj.name);\nobj.age = 26;\n```\n\n是通过**Object.defineProperty** 实现的, 下面的代码就可以实现一个完整的属性修改和获取的监听。\n```javascript\nlet vm = {};\nlet data = {\n name: 'yanle',\n age: 25\n};\nlet key, value;\nfor (key in data) {\n (function (key) {\n Object.defineProperty(vm, key, {\n get: function () {\n console.log('get', data[key]);\n return data[key]; // data的属性代理到vm 上 \n },\n set: function (newValue) {\n console.log('set', newValue);\n data[key] = newValue;\n }\n })\n })(key)\n}\n```\n\n## vue中的模板\n\n**模板** \n本质就是字符串； \n有逻辑： if for 等； \n跟html格式很像，但是区别很大; \n最终要转为HTML来现实； \n模板需要用JS代码来实现，因为有逻辑，只能用JS来实现；\n\n\n**render函数-with用法**：\n```javascript\nlet obj = {\n name: 'yanle',\n age: 20,\n getAddress: function () {\n alert('重庆')\n }\n};\n// 不用with 的情况\n// function fn() {\n// alert(obj.name);\n// alert(obj.age);\n// obj.getAddress();\n// }\n// fn();\n\n// 使用with的情况\nfunction fn1() {\n with (obj) {\n alert(name);\n alert(age);\n getAddress();\n }\n}\nfn1();\n```\n这种with 的使用方法就如上所述。但是尽量不要用，因为《JavaScript语言精粹》中，作者说过，这种使用方式会给代码的调试带来非常大的困难。 \n但是vue源码中的render 就是用的这个;\n\n\n**render函数**: \n $\"02-12-1\"$ \n![02-12-2](https://user-images.githubusercontent.com/22188674/224475405-34baf640-f897-4a26-9817-109e8b4c1bde.png)\n\n模板中的所有信息都包含在了render 函数中。 \n一个特别简单的示例:\n```javascript\nlet vm = new Vue({\n el: '#app',\n data: {\n price: 200\n }\n });\n\n // 一下是手写的\n function render() {\n with (this) { // 就是vm\n _c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [_v(_s(price))])\n ]\n )\n }\n }\n\n function render1() {\n return vm._c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [vm._v(vm._s(vm.price))]) // vm._v 是创建文本， _s 就是toString\n ]\n )\n }\n```\n\n如果我们用一个复杂的例子来描述这个东西。在源码中，搜索code.render, 然后在在此之前打印render 函数，就可以看看这个到底是什么东西了。\n```javascript\nvar createCompiler = createCompilerCreator(function baseCompile (\n template,\n options\n) {\n var ast = parse(template.trim(), options);\n if (options.optimize !== false) {\n optimize(ast, options);\n }\n var code = generate(ast, options);\n console.log(code.render);\n return {\n ast: ast,\n render: code.render,\n staticRenderFns: code.staticRenderFns\n }\n});\n```\n然后运行，就可以看到到底render 函数是什么东西了。就可以截取源码出来看了。 \n相对应的模板如下:\n```html\n

\n
\n \n

{{item}}

\n```\n截取的render函数如下：\n```javascript\nfunction codeRender() {\n with (this) {\n return _c('div',\n {attrs: {\"id\": \"app\"}},\n [\n _c('div', [\n _c('input', {\n directives: [{\n name: \"model\",\n rawName: \"v-model\",\n value: (title), // 渲染指定数据\n expression: \"title\"\n }],\n domProps: {\"value\": (title)}, // 渲染指定数据\n on: { // 通过input输入事件，修改title\n \"input\": function ($event) {\n if ($event.target.composing) return;\n title = $event.target.value\n }\n }\n }),\n _v(\" \"), // 文本节点\n _c('br'),\n _v(\" \"),\n _c('button', { // dom 节点\n attrs: {\"id\": \"btn-submit\"},\n on: {\"click\": add} // methods 里面的东西也都挂在this上面去了\n },\n [_v(\"submit\")])]),\n\n _v(\" \"),\n\n _c('div', [\n _c('ul',\n {attrs: {\"id\": \"ul-list\"}},\n _l((list), function (item) { // 数组节点\n return _c('li', [_v(_s(item))])\n })\n )\n ])\n ])\n }\n}\n```\n从vue2.0开始支持预编译，我们在开发环境下，写模板，编译打包之后，模板就变成了JS代码了。vue已经有工具支持这个过程。\n\n\n## vue中的渲染\nvue的渲染是直接渲染为虚拟dom ,这一块儿的内容，其实是借鉴的snabbdom, 非常相似，可以去看看snabbdom 就可以一目了然了。 \nvue中的具体渲染实现: \n![02-12-03](https://user-images.githubusercontent.com/22188674/224475434-c4e33700-d223-4472-8e96-5cc7b6c04d70.png)\n\n\n\n## 整体流程的实现\n\n第一步：解析模板形成render 函数\n- with 用法\n- 模板中的所有数据都被render 函数包含\n- 模板中data的属性，变成了JS变量\n- 模板中的v-model、v-for、v-on都变成了JS的逻辑\n- render函数返回vnode\n\n第二步：响应式开始监听数据变化\n- Object.defineProperty 的使用\n- 讲data中的属性代理到vm 上\n\n第三步：首次渲染，显示页面，而且绑定数据和依赖\n- 初次渲染，执行updateComponent, 执行vm._render();\n- 执行render函数，会访问到vm.list和vm.title等已经绑定好了的数据；\n- 会被详情是的get 方法监听到 \n 为何一定要监听get, 直接监听set 不行吗？ data中有很多的属性，有的被用到了，有的没有被用到。被用到的会走get, 不被用到的不会走get。\n 没有被get监听的属性，set的时候也不会被坚挺。为的就是减少不必要的重复渲染，节省性能。\n- 执行updateComponent的时候，会执行vdom的patch方法\n- patch 讲vnode渲染为DOM，初次渲染完成\n\n第四步： data属性变化，出发render\n- 修改属性值，会被响应式的set监听到\n- set中会执行updateComponent，重新执行vm.render()\n- 生成vnode和prevVnode, 通过patch进行对比\n- 渲染到html中 \n","reactions",{"_54":162,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/79/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/79/timeline","performed_via_github_app","state_reason","score",1,{"_54":179,"_56":57,"_58":180,"_60":181,"_62":182,"_64":183,"_66":184,"_68":185,"_70":186,"_72":187,"_74":188,"_107":189,"_120":121,"_122":26,"_123":-5,"_124":191,"_126":192,"_148":141,"_142":194,"_144":195,"_147":-5,"_150":151,"_152":196,"_157":-5,"_158":197,"_160":198,"_172":200,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/78","https://api.github.com/repos/pro-collection/interview-question/issues/78/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/78/comments","https://api.github.com/repos/pro-collection/interview-question/issues/78/events","https://github.com/pro-collection/interview-question/issues/78",1619937730,"I_kwDOJGDC6c5gjknC",78,"[vue]: vue2.x 虚拟 dom 是怎么实现的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[190],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":193,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:57:17Z","2023-03-11T09:00:32Z",{"_154":141,"_155":141,"_156":141},"## virtual-dom 实现之一: snabbdom\r\n\r\nvue2.0就是使用的snabbdom \r\n一个简单的使用实例：\r\n```javascript\r\nvar snabbdom = require('snabbdom');\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\n\r\nvar container = document.getElementById('container');\r\n\r\nvar vnode = h('div#container.two.classes', {on: {click: someFn}}, [\r\n h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),\r\n ' and this is just normal text',\r\n h('a', {props: {href: '/foo'}}, 'I\\'ll take you places!')\r\n]);\r\n// Patch into empty DOM element – this modifies the DOM as a side effect\r\npatch(container, vnode);\r\n\r\nvar newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [\r\n h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),\r\n ' and this is still just normal text',\r\n h('a', {props: {href: '/bar'}}, 'I\\'ll take you places!')\r\n]);\r\n// Second `patch` invocation\r\npatch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state\r\n```\r\n\r\n\r\n### snabbdom 核心api\r\n- snabbdom.init:\r\n The core exposes only one single function snabbdom.init. This init takes a list of modules and returns a patch function that uses the specified set of modules.\r\n```javascript\r\nvar patch = snabbdom.init([\r\n require('snabbdom/modules/class').default,\r\n require('snabbdom/modules/style').default,\r\n]);\r\n```\r\n\r\n- patch:\r\n```javascript\r\npatch(oldVnode, newVnode);\r\n```\r\n\r\n- snabbdom/h:\r\n It is recommended that you use snabbdom/h to create vnodes. h accepts a tag/selector as a string, an optional data object and an optional string or array of children.\r\n```javascript\r\nvar h = require('snabbdom/h').default;\r\nvar vnode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n```\r\n\r\n- snabbdom/tovnode:\r\n Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, server-side generated content.\r\n```javascript\r\nvar snabbdom = require('snabbdom')\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\nvar toVNode = require('snabbdom/tovnode').default;\r\n\r\nvar newVNode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n\r\npatch(toVNode(document.querySelector('.container')), newVNode)\r\n```\r\n\r\n### h函数和 patch 的使用\r\n例如下面的一个dom 结构：\r\n```html\r\n

item1
item2

\r\n```\r\n用h函数来表示，就如下形式：\r\n```javascript\r\nlet vnode = h('ul#list', {}, [\r\n h('li.item', {}, 'item1'),\r\n h('li.item', {}, 'item2')\r\n])\r\n```\r\n作用就是模拟的一个真实节点。\r\n\r\npatch的使用方式： \r\n第一种方式 patch('容器', vnode); // 这种使用方式是直接渲染dom \r\n第二种是用方式: patch(oldVnode, newVnode); // 这种方式会自动对比dom的差异性，然后只渲染我们需要dom;\r\n\r\n一个简单的使用实例：\r\n```html\r\n\r\n\r\n\r\n \r\n snabbdom\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### snabbdom 的使用实例\r\n```html\r\n\r\n

\r\n
\r\n\r\n\r\n\r\n```\r\n\r\n\r\n## diff算法\r\n### 概念\r\n就是找出两个文件的不同\r\n\r\ndiff 算法是非常复杂的，实现难度非常大，源码两非常大。所以需要去繁就简，明白流程，不关心细节。 \r\n在vdom中，需要找出本次dom 必须更新的节点来更新，其他的不用更新。找出这个过程就是diff算法实现的。找出前后两个虚拟dom的差异。\r\n\r\n\r\n### diff实现的过程\r\n这里以snabbdom为例子： \r\npatch(container, vnode); patch(vnode, newVnode); 这两个方法里面就使用到了diff算法。用patch方法来解析diff算法流程核心。\r\n\r\n**patch(container, vnode)** \r\n![02-11-1](https://user-images.githubusercontent.com/22188674/224475327-0b8f19b3-7a35-40ec-960b-6040852f1a7d.png)\r\n\r\n如果上面的数据，我们怎么构建真正的dom 结构：\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n \r\n if(!tag) return null;\r\n \r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n \r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n \r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n \r\n return elem;\r\n};\r\n```\r\n\r\n**patch(vnode, newVnode)** \r\n![02-11-2](https://user-images.githubusercontent.com/22188674/224475289-d2f8b10a-1f02-4126-9f2e-b813b0387c84.png) \r\n![02-11-3](https://user-images.githubusercontent.com/22188674/224475309-45c68933-3aa8-402a-8353-d09b506e0d46.png)\r\n\r\n伪代码实现如下\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n\r\n if(!tag) return null;\r\n\r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n\r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n\r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n\r\n return elem;\r\n};\r\n```\r\n\r\n### diff算法的其他内容\r\n- 节点的新增和删除\r\n- 节点重新排序\r\n- 节点属性、样式、事件绑定\r\n- 如果极致压榨性能\r\n",{"_54":199,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/78/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/78/timeline",{"_54":202,"_56":57,"_58":203,"_60":204,"_62":205,"_64":206,"_66":207,"_68":208,"_70":209,"_72":210,"_74":211,"_107":212,"_120":121,"_122":26,"_123":-5,"_124":214,"_126":215,"_148":141,"_142":228,"_144":229,"_147":-5,"_150":151,"_152":230,"_157":-5,"_158":231,"_160":232,"_172":234,"_174":-5,"_175":-5,"_176":177},"https://api.github.com/repos/pro-collection/interview-question/issues/75","https://api.github.com/repos/pro-collection/interview-question/issues/75/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/75/comments","https://api.github.com/repos/pro-collection/interview-question/issues/75/events","https://github.com/pro-collection/interview-question/issues/75",1619931872,"I_kwDOJGDC6c5gjjLg",75,"[vue]: 手写 vue 双向绑定？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[213],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":216,"_64":217,"_58":218,"_66":219,"_68":220,"_70":221,"_72":222,"_118":223,"_136":224,"_138":225,"_140":141,"_120":121,"_142":226,"_144":227,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},491,"2023-03-06T15:00:15Z","2025-02-10T16:32:39Z","2023-03-11T08:32:37Z","2023-03-11T08:32:38Z",{"_154":141,"_155":141,"_156":141},"## 双向绑定核心知识点\n\n如果一个对象中有属性有方法，那么调用属性可以直接. 就可以调用，但是如果是调用方法的时候，是通过入参来决定key的值来调用的话，请用[]来表示： \n```html\n\n\n \n \n MVVM 双项绑定\n \n \n \n

Hi，MVVM

\n \n

{{name}} 's age is {{age}}

\n \n

\n \n \n\n```\n\n",{"_54":233,"_163":141,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141},"https://api.github.com/repos/pro-collection/interview-question/issues/75/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/75/timeline","pagination",{"_237":238,"_154":238},"value",7,"actionData","errors"]