Vue.js 第一章学习笔记

 获取 id 为 app 的 div 标签 
 它的文本内容为 hello world 
 为其绑定点击事件 
 当点击时弹出提示：ok

 const div = document.querySelector('#app') // 获取 div 
 div.innerText = 'hello world' // 设置文本内容 
 div.addEventListener('click', () => { alert('ok') }) // 绑定点击事件

 <div @click="() => alert('ok')">hello world</div>

div.textContent = 'hzh 真帅'

<div @click="handleClick">{{ message }}</div>

const app = {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    handleClick() {
      // 声明式更新：只改变数据，Vue自动更新DOM
      this.message = 'hzh 真帅';
    }
  }
}

//当我们的this.message = 'hzh 真帅'的时候,vue自动做了这么一步
div.textContent = 'hzh 真帅'

// 真实DOM - 浏览器中的实际节点
<div class="title" id="app">Hello World</div>

// 对应的虚拟DOM
const vnode = {
  type: 'div',
  props: {
    class: 'title',
    id: 'app'
  },
  children: 'Hello World'
}

<div id="list">
        <li>项目1</li>
        <li>项目2</li>
</div>

// 更新列表 - 重新渲染整个列表
const list = document.getElementById('list');
list.innerHTML = `
  <li>项目1</li>
  <li>项目2</li>
  <li>新项目3</li>  <!-- 只增加了这一项 -->
`;

// 旧的虚拟DOM
const oldVNodes = [
  { type: 'li', children: '项目1' },
  { type: 'li', children: '项目2' }
];

// 新的虚拟DOM  
const newVNodes = [
  { type: 'li', children: '项目1' },
  { type: 'li', children: '项目2' },
  { type: 'li', children: '新项目3' }
];

大概意思是:

原本:list.innerHTML = `
  <li>项目1</li>
  <li>项目2</li>
`;
->
销毁之后:list.innerHTML = ``
->
重新更新:list.innerHTML = `
  <li>项目1</li>
  <li>项目2</li>
  <li>新项目3</li>
`;

    // 虚拟DOM如何工作
    const oldVNode = {
      type: 'ul',
      children: [
        { type: 'li', children: 'Item 1' },
        { type: 'li', children: 'Item 2' }
      ]
    };

    const newVNode = {
      type: 'ul', 
      children: [
        { type: 'li', children: 'Item 1' },
        { type: 'li', children: 'Updated Item 2' }, // 只有这里变了
        { type: 'li', children: 'Item 3' } // 新增
      ]
    };

    // Diff算法发现：
    // - 第一个li没变，复用
    // - 第二个li文本变了，只更新文本
    // - 新增第三个li，创建新元素

const obj = { 
tag: 'div', 
children: [ 
{ tag: 'span', children: 'hello world' } 
] 
}

function Render(obj, root) {
   const el = document.createElement(obj.tag)
   if (typeof obj.children === 'string') {
     const text = document.createTextNode(obj.children)
     el.appendChild(text)
   } else if (obj.children) {
     // 数组，递归调用 Render，使用 el 作为 root 参数
     obj.children.forEach((child) => Render(child, el))
   }

   // 将元素添加到 root
   root.appendChild(el)
 }

 Render(obj, document.body)

const html = `
 <div>
   <span>hello world</span>
 </div>
 `
 // 调用 Compiler 编译得到树型结构的数据对象
 const obj = Compiler(html)