入门与实例

<template>
  <div id="app">{{ message }}</div>
</template>

<script>
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})
</script>

// 打开浏览器控制台
app.message = "Hello World!"
// 页面自动更新

<template>
  <div id="app">
    <ol>
      <todo-item
        v-for="item in groceryList"
        :todo="item"
        :key="item.id"
      ></todo-item>
    </ol>
  </div>
</template>

<script>
Vue.component("todo-item", {
  props: ["todo"],
  template: "<li>{{ todo.text }}</li>"
})

var app = new Vue({
  el: "#app",
  data: {
    groceryList: [
      { id: 0, text: "蔬菜" },
      { id: 1, text: "奶酪" }
    ]
  }
})
</script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

npm install vue@^2

import Vue from "vue"
// 或
const Vue = require("vue")

npm install -g @vue/cli

vue create my-vue-app
cd my-vue-app
npm run serve

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个 Vue 应用</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ title }}</h1>
      <p>当前计数: {{ count }}</p>
      <button @click="increment">增加</button>
      <button @click="decrement">减少</button>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          title: "欢迎学习 Vue.js",
          count: 0
        },
        methods: {
          increment() { this.count++ },
          decrement() { this.count-- }
        }
      })
    </script>
  </body>
</html>

var vm = new Vue({
  el: "#app",
  data: { message: "Hello" },
  computed: {
    reversedMessage() {
      return this.message.split("").reverse().join("")
    }
  }
})

// ✅ 提前声明所有需要的属性
data: {
  newTodoText: "",
  visitCount: 0,
  todos: []
}

var vm = new Vue({
  // 选项
})

var vm = new Vue({
  data: {
    message: "Hello Vue!",
    user: { name: "John", age: 25 }
  }
})

console.log(vm.message)          // "Hello Vue!"
console.log(vm.$data.message)    // "Hello Vue!"
console.log(vm.$data === vm.$options.data)  // true

Vue.component("user-profile", {
  props: {
    name: String,
    age: { type: Number, default: 18 }
  },
  created() {
    console.log(this.$props.name)
  }
})

var vm = new Vue({
  template: '<div id="app">{{ message }}</div>',
  data: { message: "Hello Vue!" }
})
vm.$mount()
console.log(vm.$el.tagName)  // "DIV"

Vue.component("my-component", {
  apiEndpoint: "/api/users",
  methods: {
    fetchData() {
      return fetch(this.$options.apiEndpoint).then(res => res.json())
    }
  }
})

// 简单场景下访问全局状态
this.$root.globalState

this.$refs.child1   // 直接引用子组件
this.$refs.items    // v-for 中 ref 返回数组

// 子组件中访问
this.$slots.header    // 具名插槽
this.$slots.default   // 默认插槽

Vue.component("todo-list", {
  props: ["todos"],
  render(createElement) {
    return createElement("ul",
      this.todos.map(todo =>
        createElement("li", [this.$scopedSlots.default({ todo })])
      )
    )
  }
})

<input ref="input" type="text" />
<user-profile ref="profile" />

this.$refs.input.focus()
this.$refs.profile.sayHello()

if (!this.$isServer) {
  window.addEventListener("resize", this.handleResize)
}

Vue.component("base-input", {
  inheritAttrs: false,
  props: ["value"],
  template: `<input v-bind:value="value" v-bind="$attrs" @input="$emit('input', $event.target.value)">`
})

Vue.component("base-button", {
  template: `<button v-on="$listeners"><slot></slot></button>`
})

// 监听属性
vm.$watch("a", (newVal, oldVal) => {
  console.log(`a: ${oldVal} -> ${newVal}`)
})

// 监听函数
vm.$watch(
  () => this.a + this.b,
  sum => console.log("sum:", sum)
)

// 深度监听对象
vm.$watch("user", callback, { deep: true })

// 立即执行
vm.$watch("a", callback, { immediate: true })

// 取消监听
const unwatch = vm.$watch("a", callback)
unwatch()

// src/core/observer/traverse.js
function traverse(val) {
  // 递归遍历对象/数组的所有属性，触发 getter 收集依赖
  const seenObjects = new Set()  // 防止循环引用
  function _traverse(val, seen) {
    if (val.__ob__) {          // 仅响应式对象（有 __ob__）才有 dep
      if (seen.has(val.__ob__.dep.id)) return  // 已遍历过
      seen.add(val.__ob__.dep.id)
    }
    // 深度遍历子属性
    if (Array.isArray(val)) {
      val.forEach(item => _traverse(item, seen))
    } else {
      const keys = Object.keys(val)
      for (let key of keys) {
        _traverse(val[key], seen)  // 递归触发 getter → 收集依赖
      }
    }
  }
  _traverse(val, seenObjects)
}

// 处理 Vue 无法检测的变更
vm.$set(vm.user, "age", 25)       // 对象添加属性
vm.$set(vm.items, 1, "B")         // 数组索引赋值

// src/core/observer/index.js
function set(target, key, val) {
  // 1. 数组处理：调用 splice 触发响应式更新
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  // 2. 对象已有属性：直接赋值（已响应式）
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 3. 获取 Observer 实例
  const ob = target.__ob__
  // 4. 根数据对象不可新增属性
  if (ob && ob.vmCount) {
    warn('Avoid adding reactive properties to root data at runtime.')
    return val
  }
  // 5. 非响应式对象：直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 6. 核心：对新属性调用 defineReactive + 触发依赖通知
  defineReactive(ob.value, key, val)
  ob.dep.notify()  // 通知所有依赖此对象的 Watcher
  return val
}

// src/core/observer/index.js
function del(target, key) {
  // 1. 数组处理：调用 splice
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = target.__ob__
  // 2. 属性不存在：直接返回
  if (!hasOwn(target, key)) return
  // 3. 删除属性
  delete target[key]
  // 4. 非响应式对象：无需通知
  if (!ob) return
  // 5. 触发依赖通知
  ob.dep.notify()
}

vm.$delete(vm.user, "age")
vm.$delete(vm.items, 1)

vm.$on("test", msg => console.log("Received:", msg))
vm.$emit("test", "Hello")

// 2.2.0+ 支持数组
vm.$on(["event1", "event2"], handler)

vm.$once("init", config => console.log("Initialized"))
// 之后再 emit 不会触发

// 子组件
this.$emit("give-advice", advice)

// 父组件模板
<magic-eight-ball @give-advice="showAdvice">

var MyComponent = Vue.extend({
  template: "<div>Hello!</div>"
})

// 三种挂载方式
new MyComponent().$mount("#app")
new MyComponent({ el: "#app" })
var component = new MyComponent().$mount()
document.getElementById("app").appendChild(component.$el)

// 回调
this.$nextTick(() => {
  console.log(this.$el.textContent)  // 已更新
})

// Promise（2.1.0+）
this.$nextTick().then(() => { ... })

// async/await
async updateMessage() {
  this.message = "Updated"
  await this.$nextTick()
  console.log(this.$el.textContent)  // 已更新
}

// ✅ 推荐：提前声明所有响应式属性
data() {
  return {
    message: "",
    user: null,
    items: []
  }
}

// ❌ 避免：动态添加属性
this.message = "Hello"  // 非响应式（如果未在 data 中声明）

// ✅ 推荐：使用 props 和 events
<child-component :data="value" @update="handler">

// ✅ 跨组件：Event Bus（小型应用）
var bus = new Vue()
bus.$emit("event", data)
bus.$on("event", handler)

// ✅ 大型应用：Vuex

beforeDestroy() {
  clearInterval(this.timer)
  this.eventBus.$off("event", this.handler)
  window.removeEventListener("resize", this.handleResize)
}

Vue.component("transparent-wrapper", {
  inheritAttrs: false,
  template: `<div class="wrapper"><input v-bind="$attrs" v-on="$listeners"></div>`
})