- Vue 响应式基本原理
// 能答出来 Vue 的响应式监听是通过 Object.defineProperty 实现的,至少就能得一半的分 const data = {} let name = 'zhangsan' Object.defineProperty(data, 'name', { get: function () { console.log('get'); return name }, set: function (newVal) { console.log('set'); name = newVal } }) console.log(data.name); // get zhangsan data.name = 'lisi' // set
- Object.defineProperty 缺点
- 深度监听,需要递归到底,一次性计算量很大
- 无法监听新增属性 / 删除属性(vue.set / Vue.delete)
- 无法原生监听数组,需要特殊处理
- 用 JS 模拟 DOM 结构
<div id="div1" class="container"> <p>vdom</p> <ul style="font-size: 20px;"> <li>a</li> </ul> </div>
{ tag: 'div', props: { className: 'container', id: 'div1' }, children: [ { tag: 'p', children: 'vdom' }, { tag: 'ul', props: { style: 'font-size: 20px'}, children: [ { tag: 'li', children: 'a' } ] } ] }
Vue 基本原理面试题常见知识点
最新推荐文章于 2024-06-29 14:48:29 发布