导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

vue单文件方式

• 单文件就是以 *.vue 结尾的文件，最终通过 webpack 编译成 .js 文件在浏览器运行
• 内容：<template></template> + <script></script> + <style></style>
  • template 只能用一个根节点 (2.x版本以后)
  • script 中按照 export default { 配置 } 来写
  • style 中 可以设置 scoped 属性，让其只能在当前 template 中生效

以单文件方式启动

• webpack 找人来理解的单文件代码
  • vue-loader 依赖 vue-template-compiler 依赖 vue文件中的代码

// webpack 配置中使用 vue-loader 来解析 vue 文件：

// 解析vue
test: /\\.vue$/,
loader: 'vue-loader', // 这里不写vue-template-compiler，因为它只是内部代码上的依赖

⭐️ 核心概念

• 组件化
• 数据双向绑定（基于 ES5 中的 defineProperty 实现的）IE9及以上才支持
  • 通过 defineProperty 深度遍历并劫持 data 数据
    • 通过 getter 读取属性值
    • 通过 setter 监听属性变化，通知 watcher 更新（update）视图
  • 通过编译模板，寻找类似 input 中 v-model 绑定
    • 给 input 添加事件绑定
    • value 变化触发 @input 事件，更改数据
    • v-model 是 @input + value 的语法糖
• 类 MVVM
  • data 变化 --- vm 数据劫持 --> view 更新
  • data 更新 <-- vm 事件监听 --- view 变化