共计 5154 个字符，预计需要花费 13 分钟才能阅读完成。

class Watcher{
  ……
  evaluate () {this.value = this.get()
    this.dirty = false
  }
  ……
}

class initComputed{
  …… 
  // 计算属性的 getter 获取计算属性的值时会调用
    createComputedGetter (key) {return function computedGetter () {
          // 获取到相应的 watcher
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
             //watcher.dirty 参数决定了计算属性值是否需要重新计算，默认值为 true，即第一次时会调用一次
              if (watcher.dirty) {
                  /* 每次执行之后 watcher.dirty 会设置为 false，只要依赖的 data 值改变时才会触发
                  watcher.dirty 为 true, 从而获取值时从新计算 */
                watcher.evaluate()}
              // 获取依赖
              if (Dep.target) {watcher.depend()
              }
              // 返回计算属性的值
              return watcher.value
        }
      }
    }
  ……
}

// src/core/instance/state.js 源码路径
function initProps (vm: Component, propsOptions: Object) {
  ...
  for (const key in propsOptions) {if (process.env.NODE_ENV !== 'production') {
      ...
      defineReactive(props, key, value, () => {
        // 如果不是跟元素并且不是更新子元素
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })}
    ...
  }
}
// src/core/observer/index.js
export function defineReactive (obj,key,val,customSetter,shallow) {const property = Object.getOwnPropertyDescriptor(obj, key)
  
  const getter = property && property.get
  const setter = property && property.set
  
  Object.defineProperty(obj, key, {
    ...
    set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val
      if (newVal === value || (newVal !== newVal && value !== value)) {return}
      if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()
      }
      if (getter && !setter) return
      if (setter) {setter.call(obj, newVal)
      } else {val = newVal}
      childOb = !shallow && observe(newVal)
      dep.notify()}
  })
}

共计 82 个字符，预计需要花费 1 分钟才能阅读完成。

共计 5590 个字符，预计需要花费 14 分钟才能阅读完成。

Vue 不支持 IE8 及以下版本 1、指令：

v-bind，v-if=”seen”，v-for=”todo in todos”，v-on 指令添加一个事件监听器，<button v-on:click=”reverseMessage”> 逆转消息 </button>
2、常用指令有哪些？

v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-on v-on:click=”doThis(item)”v-bind 动态地绑定一个或多个特性，或一个组件 prop 到表达式 v -bind:href=”myurl”
v-bind:id=”myid”
v-bind 可以缩写为 : 属性 , 例如 :href=”myurl”
示例 :id :class :href :title :src :style :key :value
v-bind:class=”{active: isActive}”：当 isActive 变量为 true 时，动态添加 active 类 classv-modelv-for 的使用 i 是索引 <ul>
<li v-for=”(item, i) in msg”>
<a href=”#javascript:”>{{i}} {{item.hotWord}}</a>
</li>
</ul>
msg:[
{hotWord: “zz1”},
{hotWord: “zz2”},
{hotWord: “zz3”},
{hotWord: “zz4″}
],
3、表单

<select v-model=”selected”> <option v-for=”option in options” v-bind:value=”option.value”>
{{option.text}}
</option></select><span>Selected: {{selected}}</span>new Vue({el: ‘…’, data: {
selected: ‘A’,
options: [
{text: ‘One’, value: ‘A’},
{text: ‘Two’, value: ‘B’},
{text: ‘Three’, value: ‘C’}
]
}}) 默认选中 A 的下拉框。
4、组件基础：组件是可复用的 vue 实例，5、条件渲染：

<h1 v-if=”ok”>Yes</h1><h1 v-else>No</h1>6、事件处理：

在表单 <input> <textarea> 及 <select> 元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。7、组件基础：1。父组件像子组件传值：通过 props 数组父组件：<template> <child :name=”name”></child></template><script>import child from “./child.vue” export default {
components: {child},
data(){
return {name:” 二哈 ”}
}
}</script> 子组件：<template> <div>{{name}}</div></template><script> export default {
props:[“name”]
}</script>2：子组件给父组件：父组件：<template> <child @childToParent=”reviceSondata”></child></template><script>import child from “./child.vue” export default {
components: {child},
methods:{
reviceSondata(data){
console.log(data);
}
}
}</script> 子组件：<template> <button @click=”dataTofather”> 点击 </button></template><script> export default {
data () {
return {
message: ‘ 啦啦啦啦 ’
}
},
methods:{
dataTofather(){
this.$emit(“childToParent”,this.message,true);
}
}
}</script>
8、axios 简介

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 CSRF/XSRF
引入方式：
1、安装：npm install axios
2、在 main.js 文件中 引入
import axios from ‘axios’
Vue.prototype.$http = axios
在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http 命令
methods: {
postData () {
this.$http({
method: ‘post’,
url: ‘/user’,
data: {
name: ‘xiaoming’,
info: ’12’
}
})
}
执行 GET 请求：
// 也可以通过 params 对象传递参数
$http.get(‘/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST 请求
$http.post(‘/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})

9、学习使用 Promise

https://blog.csdn.net/heshuai… 有没有一种方法可以让写法像同步，而本质是异步化呢？Promise 就出来了。一：优点和缺点可以将异步操作以同步操作流程的方式表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。如何使用？：function promiseAjax(url){
let p = new Promise((resolve,reject)=>{
// 第一个参数成功的回调函数
// 第二个参数失败的回调函数

let xhr = new XMLHttpRequest();
xhr.open(‘get’,url,true);
xhr.send();
xhr.onreadystatechange=function(){
if(this.readyState===4){
if(this.status >= 200 && this.status <300 || this.status === 304){
let res = JSON.parse(this.responseText)
resolve(res);// 成功回调函数的传参；
}else{
reject(this.status)// 失败回调函数的传参；
}
}
}
})
return p
}
// 然后调用
let oData = promiseAjax(‘http://localhost:8080/yxw/MenuController_GeneralMenuList.do’);
let oData2 = promiseAjax(‘http://localhost:8080/yxw/DomesticProfitController_getOperatIdList.do’);

Promise.all([oData,oData2]).then(function(res){
console.log(‘3333’,res)
},function(err){
console.log(err)
})

10、生命周期钩子

一：组件创建前后：1.beforeCreate2.created 例子：data（）{
return {
a:1
},
beforeCreate(){
console.log(this.a)//undefined
},
created(){
console.log(this.a)//1
}
} 二. vue 启动前后 3.beforeMount4.mounted 这两个的意思就是，vue 在 beforeMount 时，还不管事，也就是说，还没有渲染数据到 <div id=”app”><div/> 里面，此时的这个组件还是空的
当 mounted 时，才会往 <div id=”app”><div/> 添加东西，也就是 vue 正式 接管 <div id=”app”><div/>
可以获取 #app 的 innerHTML 查看差异；beforeMount(){
console.log(document.getElementById(‘app’).innerHTML)// 空的
},mounted(){
console.log(document.getElementById(‘app’).innerHTML)//#app 里的内容
} 三. 组件更新前后 5.beforeUpdate6.updated 当子组件里面的 视图改变 的时候触发。如，做一个按钮，让 data 里面的 a ++，假如 一开始 a 是 1 beforeUpdate 返回 1 updated 返回 2 例子：点击一次之后返回值分别是 1，2<button id=”button1″ @click =”handleClick”>{{a}}</button>data () { return {
a:1,
}},beforeUpdate(){ console.log(‘beforeUpdate’,document.getElementById(‘button1’).innerHTML) //1},updated(){ console.log(‘updated’,document.getElementById(‘button1’).innerHTML) //2},methods: {handleClick(){
this.a = this.a + 1;
console.log(‘ 嘿嘿 ’, this.a)
}} 四. 组件销毁前后 7.beforeDestroy8.destroyed 一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？答案是会的 所以这时候就会用到了 destroyed, 在组件被销毁后，我们把定时器给清除就好了。所以这两个钩子函数一般用于做性能的优化。六. 当捕获一个来自子孙组件的错误时被调用 11.errorCapture 当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数，第一个参数是 错误对象 第二个参数是 报错的子孙组件 第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义 b 这个变量，但是我去 console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了 created 这个钩子函数里，那第三个参数会返回就是：created hook）。
11、computed 属性和 watch 属性：

https://blog.csdn.net/joseydo…https://www.w3cplus.com/vue/v…computed 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。例子：<div v-for=”subject in results”>
<input v-model=”subject.marks”>
<span>Marks for {{subject.name}}: {{subject.marks}}</span>
</div>
<div> 学科总分 Total marks are: {{totalMarks}} </div>results: [
{name: ‘English’, marks: 70},
{name: ‘Math’, marks: 80},
{name: ‘History’, marks: 90}
]
computed: {
totalMarks: function () {
let total = 0;
let me = this;
for (let i = 0; i < me.results.length; i++)
{
total += parseInt(me.results[i].marks);
}
return total;
}
},
我们可以使用 Vue 中的 method 计算出学科的总分，最终得到的总数结果是相同的我们把 computed 区块中的 totalMarks 函数整体移到 methods 中。同时在模板中将 {{totalMarks}} 替换成 {{totalMarks() }}。你最终看到的结果是一样的。
computed 属性，和在 methods 中定义一个相同的函数都可以实现这个功能，那么区别是？
computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值 (re-evaluate)。
这就意味着，只要 message 没有发生变化，多次访问 computed 属性 reversedMessage，将会立刻返回之前计算过的结果，而不必每次都重新执行函数。其次，计算属性具有缓存，相比 Vue 中的方法而言，性能更佳。但 Vue 中的计算属性都是同步的，如果需要异步我们得依赖于 vue-async-computed 插件 12、组建基础：