Vue 核心语法、响应式原理与生命周期实战指南 | 极客日志

JavaScript大前端算法

Vue 核心语法、响应式原理与生命周期实战指南

Vue 框架核心语法、响应式原理与生命周期实战。涵盖数据驱动视图、MVVM 思想、插值与指令系统（v-bind/v-model/v-for/v-if）、事件处理与修饰符、计算属性与侦听器、虚拟 DOM 与 Diff 算法、Class/Style 绑定、表单收集及生命周期钩子。深入解析 Object.defineProperty 实现的数据代理与劫持机制，提供手写简易 Vue 框架思路，适合希望掌握 Vue 底层逻辑与高级应用的开发者。

墨染流年发布于 2026/4/8更新于 2026/5/2413 浏览

Vue2 简介

数据驱动视图，双向数据绑定。

1.1 数据驱动视图

1.1.1 单向数据绑定

当页面数据发生变化时，页面会自动重新渲染。

文章配图

1.1.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

文章配图

1.1.3 MVVM 分层思想

文章配图

// M：Model（模型/数据）
// V：View（视图）
// VM：ViewModel（视图模型）：VM 是 MVVM 中的核心部分。

问题：MVVM 模型当中倡导了 Model 和 View 进行了分离，为什么要分离？

将 Model 和 View 分离之后，出现了一个 VM 核心，这个 VM 把所有的脏活累活给做了。也就是说，当 Model 发生改变之后，VM 自动去更新 View；当 View 发生改动之后，VM 自动去更新 Model。再也不需要编写操作 DOM 的 JS 代码了，开发效率提高了很多。

文章配图

<!-- 准备容器 --> <!-- View V-->
<div id="app">
  姓名：<input type="text" v-model="name">
</div>
<!-- vue 程序 -->

相关免费在线工具

加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，online
Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。在线工具，Gemini 图片去水印在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

<script src="../js/vue.js"></script>

<body>
  <div id="app"></div>
  <script>
    const myVue = new Vue({
      template: '<h1>Hello World!</h1>'
    })
    myVue.$mount('#app') // Vue 实例的挂载代码
  </script>
</body>

<body>
  <div id="app"></div>
  <script>
    new Vue({
      template: `<h1>{{ name }}{{ releaseTime }}开始学 Vue!! {{lead.age}}的{{lead.name}}也在学习!! 班里还有{{classmates[0].age}}岁的{{classmates[0].name}}和{{classmates[1].age}}岁的{{classmates[1].name}}。</h1>`,
      data: {
        name: '张三',
        releaseTime: '2025 年 8 月 2 日',
        lead: { name: '高齐强', age: 40 },
        classmates: [
          { name: '李四', age: 18 },
          { name: '王五', age: 80 }
        ]
      }
    }).$mount('#app')
  </script>
</body>

<body>
  <div id="app">
    <div>
      <h1>{{msg}}</h1>
      <h2>{{name}}</h2>
    </div>
  </div>
  <script>
    new Vue({
      template: `
        <div>
          <h1>{{msg}}</h1>
          <h2>{{name}}</h2>
        </div>
      `,
      data: {
        msg: "hello world!",
        name: "明天不 tm 学了!"
      },
      el: '#app'
    })
  </script>
</body>

<body>
  <div id="app"><h1>{{msg}}</h1></div>
  <div id="app2"><h1>{{msg}}</h1></div>
  <div><h1>{{name}}</h1></div>
  <script>
    new Vue({
      el: '#app',
      data: { msg: 'hell0' }
    })
    new Vue({
      el: '#app2',
      data: { name: '张三' }
    })
    // 下面会报错，因为 #app2 已经被接管
    // new Vue({ el: '#app2', data: { name: '李四' } })
  </script>
</body>

new Vue({
  el: '#app',
  data: {
    number: 1,
    gender: true,
    msg: 'abcdef',
    sayHello: function () {
      console.log('hello vue!');
    }
  }
})

<div>
  <h1>{{msg}}</h1>
  <h1>{{sayHello()}}</h1>
  <h1>{{100}}</h1>
  <h1>{{'hello vue!'}}</h1>
  <h1>{{1 + 1}}</h1>
  <h1>{{gender ? '男' : '女'}}</h1>
  <h1>{{msg.split('').reverse().join('')}}</h1>
  <h1>{{Date.now()}}</h1>
  <h1>{{Math.ceil(3.14)}}</h1>
</div>

<div>
  <h1>{{msg}}</h1>
  <h1 v-once>{{msg}}</h1>
  <h1 v-if="a <= b">v-if 测试：{{msg}}</h1>
</div>
<script>
  new Vue({
    el: '#app',
    data: { msg: 'Hello Vue!', a: 10, b: 11 }
  })
</script>

<div>
  <div v-if="false">不会显示</div>
  <img :src="imgPath1" v-if="counter % 2 === 1">
  <img :src="imgPath2" v-else>
  <span v-if="temprature <= 10">寒冷</span>
  <span v-else-if="temprature <= 25">凉爽</span>
  <span v-else>炎热</span>
  <div v-show="false">你可以看到我吗？</div>
</div>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      counter: 1,
      imgPath1: '../img/1.jpg',
      imgPath2: '../img/2.jpg',
      temprature: 0
    }
  })
</script>

<HTML v-bind:参数="表达式"></HTML>
<!--简写方式-->
<HTML :参数="表达式"></HTML>

<img :src="imgPath">
<input type="text" :value="username">
<a :href="url">走起 2</a>

<input type="text" :value="name1">
<input type="text" v-model="name2">

<button @click="sayHi($event, 'jack')">hi button2</button>
<button @click="sayWhat">what button</button>

methods: {
  sayHi(event, name) {
    console.log(name, event)
  },
  sayWhat(event) {
    console.log(event.target.innerText)
  }
}

<a href="https://www.baidu.com" @click.prevent="yi">百度</a>
<div @click.stop="er">
  <button @click="yi">事件冒泡</button>
</div>
<button @click.once="yi">事件只发生一次</button>

<input type="text" @keyup.enter="getInfo">
<input type="text" @keyup.ctrl.i="getInfo">

<ul>
  <li v-for="(vip,index) of vips">会员名：{{vip.name}}，年龄：{{vip.age}}岁</li>
</ul>
<table>
  <tr v-for="(vip,index) in vips" :key="vip.id">
    <td>{{index+1}}</td>
    <td>{{vip.name}}</td>
    <td>{{vip.age}}</td>
    <td><input type="checkbox"></td>
  </tr>
</table>

<tr v-for="(hero,index) in heros" :key="hero.id">
  <td>{{index+1}}</td>
  <td>{{hero.name}}</td>
  <td>{{hero.power}}</td>
</tr>

<h1 v-text="msg">test</h1>
<h1 v-html="s1"></h1>

directives: {
  'text-danger': function(element, binding){
    element.innerText = binding.value
    element.style.color = 'red'
  }
}

<h2>商品价格：{{price | filterA | filterB(3)}}</h2>

methods: {
  reverseInfo() {
    return this.info.split('').reverse().join('');
  }
}

computed: {
  reversedInfo: {
    get() {
      return this.info.split('').reverse().join('')
    },
    set(val) {
      this.info = val.split('').reverse().join('')
    }
  }
}

watch: {
  number: {
    immediate: true,
    handler(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  },
  a: {
    deep: true,
    handler(newValue, oldValue) {
      console.log('@')
    }
  }
}

class Vue {
  constructor(options) {
    Object.keys(options.data).forEach((propertyName, index) => {
      let firstChar = propertyName.charAt(0)
      if (firstChar != '_' && firstChar != '$') {
        Object.defineProperty(this, propertyName, {
          get() {
            return options.data[propertyName]
          },
          set(val) {
            options.data[propertyName] = val
          }
        })
      }
    })
  }
}

data() {
  return {
    msg: 'Hello Zhangsan!'
  }
}

<div :class="c1">{{msg}}</div>

<div :class="['active','text-danger']">{{msg}}</div>

<div :class="classObj">{{msg}}</div>

<div :style="myStyle">{{msg}}</div>
<div :style="{backgroundColor: 'gray'}">{{msg}}</div>

<li v-for="(vip,index) of vips">会员名：{{vip.name}}，年龄：{{vip.age}}岁</li>

computed: {
  filteredHeros() {
    const arr = this.heros.filter((hero) => {
      return hero.name.indexOf(this.keyword) >= 0
    })
    if (this.type === 1) {
      arr.sort((a, b) => { return a.power - b.power })
    } else if (this.type === 2) {
      arr.sort((a, b) => { return b.power - a.power })
    }
    return arr
  }
}

<form @submit.prevent="send">
  用户名：<input type="text" v-model.trim="user.username">
  年龄：<input type="number" v-model.number="user.age">
  性别：男<input type="radio" name="gender" value="1" v-model="user.gender">
  爱好：旅游<input type="checkbox" v-model="user.interest" value="travel">
  <select v-model="user.grade">
    <option value="zk">专科</option>
    <option value="bk">本科</option>
  </select>
  <textarea v-model.lazy="user.introduce"></textarea>
  <button>注册</button>
</form>

// ✅ 正确方法
vm.users.push('newUser')
Vue.set(vm.users, 0, 'modified')
// ❌ 错误方法
vm.users[0] = 'newName'

beforeDestroy() {
  clearInterval(this.timer)
  window.removeEventListener('resize', this.handleResize)
}

Vue 核心语法、响应式原理与生命周期实战指南

Vue2 简介

1.1 数据驱动视图

1.1.1 单向数据绑定

1.1.2 双向数据绑定

1.1.3 MVVM 分层思想

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

第一个 Vue 程序

Vue 构造函数的参数：options

Vue 实例挂载

Template 语句的数据来源 data

Template 配置项

Vue 实例和容器