Vue双向绑定原理及vue-cli

Vue.js介绍

1. Vue.js的MVVM框架

• 数据的双向绑定
  • 当数据发生变化，ViewModel会观察到数据的这种变化，然后通知到视图做自动更新
  • 当用户操作视图，ViewModel会监听到视图的这种变化，然后通知到数据做改动

2. 什么是Vue.js

Vue.js是一个轻量级的MVVM框架
中文官网：https://cn.vuejs.org/

3. 对比React、Angular

Vue.js更轻量级，gzip只有20k
Vue.js更容易上手，学习曲线平稳
吸取两家之长，借鉴了angular的指令和react的指令化

4. Vue.js的核心思想

（1）数据驱动

没有MVVM框架，需要手动更改DOM

在Vue.js里，你只需要改变数据，Vue.js通过Directives指令对DOM做一层封装，当数据发生变化，通知指令去修改对应的DOM

Vue.js还会对视图做一些监听，当我们修改视图的时候，Vue.js监听到这些变化，从而改变数据，这样就实现了数据的双向绑定

• 数据响应原理
  数据（model）改变驱动视图（view）自动更新
  我们有一份数据a.b，在一个vue对象实例化的过程中，会给a.b这份数据通过ES5的object属性添加getter和setter，同时，Vue.js会对模版进行编译，解析生成一个指令对象，每个指令对象会关联一个watcher，对a.b求值的时候会把依赖收集到watcher里面，当我们再次改变a.b的值的时候，我们就会触发setter，会通知到对应关联的watcher，watcher就会再次对a.b求值，计算对比新旧值，当发现值改变了，watcher就会通知到指令，调用指令的update方法，由于指令是对dom的封装，所以会调用dom的原生方法去更新视图，这样我们就完成了数据改变到输出更新的过程

（2）组件化

扩展HTML元素，封装可重用的代码

• 组件设计原则
  • 页面上每个独立的可视/可交互区域视为一个组件（比如一个页面的头部和尾部）
  • 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
  • 页面不过是组件的容器，组件可以嵌套自由组合形成的完整页面

Vue-cli 使用

1. Vue-cli安装

依赖环境：Node.js

# 检查node是否安装
$ node -v
# 全局安装vue-cli
$ sudo npm install -g vue-cli

2. 创建一个vue项目

# vue-cli指南
$ vue -h
# 官方可用template
# browserify,browserify-simple,pwa,simple,webpack,webpack-simple
$ vue list
# 生成脚手架
# Usage: vue-init <template-name> [project-name]
# create a new project with an official template
$ vue init webpack my-project
# create a new project straight from a github template
$ vue init username/repo my-project
# 运行服务
$ npm install
$ npm run dev

3. 项目入口

从npm run dev入手，运行的脚本在package.json的scripts.dev，该脚本指向 build/webpack.dev.conf.js 配置文件，文件开头声明一些依赖，如merge是来合并配置文件用的，utils是一些工具方法，baseWebpackConfig是一个webpack配置文件，它是开发时的webpack配置文件和运行时的webpack配置文件所共享，htmlWebpackPlugin是webpack提供的一个操作html的插件，从const baseWebpackConfig = require('./webpack.base.conf')这行我们来到build/webpack.base.conf.js 这个文件，publicPath是请求的静态资源绝对路径，对应到config/index.js 的assetsPublicPath: '/',即斜线，filename就是它输出的文件名称，主要做了webpack基础配置