VUE简介

官网地址
MVVM设计模式:model(定义在JS里面的数据)、view(用户所看到的视图)、View Model(中间处理层，有着像数据双向绑定等，诸多特性。从此以后，model和view上面的数据一变都变、一改都改。再也不用像以前一样，非得触发view上面的事件，才能修改model数据。)
进化之路:原生JS > jquery等类库 > ejs等模板引擎 > Vue/React
优势：不仅仅可以帮助我们减少不必要的DOM操作，提高渲染效率，还有像“数据双向绑定”“虚拟DOM”等许多新概念，帮助我们优雅的驾驭大型项目。不过，金无足赤，人无完人。像些个官网小项目，用个jQuery就够了。

---

---

#要点：

• 计算属性和侦听器：都是响应数据改变，继而，执行某些操作。

---

---

#详解：

#什么时候使用Computed计算属性？什么时候使用Watch侦听器？

所谓的"计算属性computed"，就是帮助VUE简化运算的，主要是和data里面的数据直接打交道。
须知：计算的是data里面的属性，得到一个新的属性结果。而且，自带BUFF技能——缓存机制，除非data里面的属性发生了变化，不然，计算属性也不会重新计算，消耗性能。

至于“侦听器watch”，相当于“监听数据变化的事件”，数据发生变化后触发，主要和method方法打交道。。
适用于执行异步操作 (访问一个 API)、在最终结果之前，设置中间状态。这些都是计算属性无法做到的场景，但是，性能方面却是远远不及计算属性。

• 当你不使用计算属性的时候，这样的代码，不烦吗？

<template>
  <div>
    {{ msg }} <br>
    {{ msg.split('').reverse().join('') }}
    {{ msg.split('').reverse().join('') }}
    {{ msg.split('').reverse().join('') }}
    ……
    ……
    想想以后维护，要是有1000个，还得了吗？
  </div>
</template>

<script>
export default {
  name:"Home",
  data(){return{msg:'剧情反转'}},
}
</script>

• 当你使用计算属性的时候，这样的代码，不香吗？

<template>
  <div>
    {{ msg }} <br>
    {{ reverseMsg }} <br>
    {{ reverseMsg }} <br>
    {{ reverseMsg }} <br>
    ……
    ……
    {{ info }} <br>
  </div>
</template>

<script>
export default {
    name:"Person",
    data(){return{msg:'Computed'}},
    //  计算属性 
    computed:{
        reverseMsg:function(){
            return this.msg.split('').reverse().join('');
        },
        info:{
            // 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter（计算属性被修改时触发）：
            get:function(){
               return `${this.msg}计算属性，不香吗？}` ;
            }
        },
    }
}
</script>

---

• 当数据改变需要设置多状态的时候，Watch侦听器再合适不过了：

// 状态1：question为空
// 状态2：question不为空，但没有问号
// 状态3：question不为空，有问号
<template>
  <div>
    Ask a question:<input type="text" v-model="question">  <br>
    <p>{{answer}}</p>  
  </div>
</template>

<script>
  export default {
    name: "Person",
    data() {
      return {
        question: '',
        answer: 'i cannot give you an answer until you ask a question!'
      }
    },
    watch: {
      question: function (newQuestion, oldQuestion) {
        this.answer = 'Waiting for your question……';
        this.getAnswer();
      }
    },
    methods: {
      getAnswer: function () {
        if(this.question.indexOf('?') === -1){
          this.answer = 'Questions usually contain a qusetion mark!'
          return;
        }
        this.answer = 'Thinking……';
      }
    }
  }
</script>