VUE入门全解

Vue新建项目

vue完整版和非完整版

非完整版

• 特点：没有compiler
• 视图：写在render函数里用h来创建标签
• cdn引入：vue.runtime.js
• webpack引入：默认使用此版
• @vue/cli：默认使用此版
  使用webpack把代码通过vue loader编译成用户使用的版本

完整版

• 特点：有compiler
• 视图：写在HTML里或者写在template选项
• cdn引入：vue.js
• webpack引入：需要配置alias
• @vue/cli：需要额外配置
  compilr（编译器）=>复制dom节点，通过compiler

两个版本区别在哪里

• compiler占40%体积
• h是尤雨溪写好传给render的
• 文件名不同，生成环境后缀为.min.js
• 尤雨溪配置的
• 尤雨溪、蒋豪群配置的
• 错误引用：vue.js错用成了vue.runtime.js(无法将HTML编译成视图)vue.runtime.js错用成了vue.js(代码体积变大，因为vue.js有编译HTML的功能)

最佳实践

总是使用非完整版，然后配合vue-loader和vue文件

思路

1. 保证用户体验，用户下载js文件体积更小，但只支持h函数
2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
3. 脏活让loader做，vue-loader把vue文件里的HTML转为h函数

// 需要编译器（完整版）template的使用方法：直接写在Html上或者JS上
new Vue({
   
  template: '<div>{
   { hi }}</div>'
})

// 不需要编译器（不完整版）render的使用方法：render函数接收一个参数h，这个参数是vue传的；用这个参数去创建实例
new Vue({
   
  render (h) {
   
    return h('div', this.hi)
  }
})

vue实例

vue实例就如同jQuery实例
封装了对DOM和data的所有操作
操作dom：监听时间、改变DOM
操作data：增删改查、但vue2有一个bug

没有封装ajax => 请用axios的ajax功能

线上ide工具请点击这里

vue的内存图

把Vue的实例命名为vm是尤雨溪的习惯，我们应该沿用
vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
vm的构造函数是Vue，按照es6的说法，vm所属的类是Vue
options是new Vue的参数，一般称之为选项或构造选项

options的五类属性

数据：data、props、propsData、computed、methods、watch
DOM：el、templa、render、renderError
生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
资源：directives、filters、components
组合：mixins、extends、provide、inject、parent
data:必学 入门属性
watch：高级属性

vue入门属性

el - 挂载点
data - 内部数据
methods - 方法
components - 组件
四个钩子-生命周期
props - 外部数据

el - 挂载点
可以用$mount代替

data - 内部数据
支持对象核函数，优先用函数

数据响应式

data里的getter和setter（键值对）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，
Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这 些 property 全部转为 getter/setter。getter和setter是存在内存中的

getter() 读对象键值
setter() 改写对象键值
// ES6新语法特性，是一种不用加括号就能返回的函数
// 这里vue作者特意用来做数据响应的处理方法

Object.defineProperty()

vue2通过Object.defineProperty来实现数据响应式
会被Vue监听(getter,setter)，会被Vue实例代理(new Vue出来的vm)
每次对data的读写都会被Vue监控
Vue会在data变化时更新UI

Object.defineProperty()
// 可以对setter再次设置
//可以给对象添加属性value
//可以给对象添加getter/setter
//getter/setter用于对属性的读写进行监控

bject.defineProperty()// 有一个bug

Object.defineProperty()// 有一个bug
// 对没有加'n'（对象赋值）是没法再次操作的，因为没有对对象进行初始化
// 解决方法一：把key全部提前声明好，后面不添加属性而是undefined

// 解决方法二：使用Vue.set或者this.$set Vue.set === this.$set 
// 作用是给没有声明的对象自动创建代理和监听(代理数据和监听数据的属性) 并且会触发UI更新
// 例：this.$set(this.obj,'new', b) 分别是 对象 属性 值

代理

对myData对象的属性读写，全权由另一个对象vm负责
那么vm就是myData的代理（类比房东租房）
比如myData.n不用，偏要用vm.n来操作myData.n

vm = new Vue({data: myData})

一、会让vm成为myData的代理（proxy）
二、会对myData的所有属性进行监控

• 为了防止vm不知道myData的属性变了
• vm通过调用render(data)改变myData
• UI = render(data)，如果修改vm.n,那么UI中的n就会响应我

// 需求: 用户修改myData，拦截他
let myData5 = {
    n: