本篇会围绕网路上常讲到主题，有些面试题应该也会多少考到一些，至少面试时可以讲的出来。

宣告式的渲染

以前热门的jQuery都是直接操作Dom来操控画面，也称为指令式的渲染，优点是直观、操作简单，但是当需求越来越多，程序也会越来越多行，造成难以维护的窘境。
宣告式的渲染则是利用data的方式，集中管理资料，再将资料呈现在画面。
HTML:

<div id="app">
  {{text}}
</div>

JavaScript:

//创建实体
const vm = Vue.createApp({
 //资料存取
  data() {
    return {
      text: 'Hello world!',
    }
  }
//挂载到#app
}).mount('#app');

MVVM概念介绍

图片来源：https://v1-cn.vuejs.org/guide/overview.html

MVVM采用这三部分来组成：

• View 画面
• ViewModel 资料系结器
• Model 资料状态

Model有任何资料的改变，ViewModel会自动把资料绑定，渲染到View画面上。
HTML:

<div id="app">
  <input type="text" v-model="text">
  {{text}}
</div>

JavaScript:

const vm = Vue.createApp({
 //Model 资料存取 
  data() {
    return {
      text: '',
    }
  }
}).mount('#app');

动手玩看看：https://codepen.io/uwhhiaxx/pen/ZEyXpyQ?editors=1010

运作概念说明，与指令式渲染的差别在与JavaScript少了对DOM的操作语法，使用Vue.creatApp建立一个新物件，并赋予给vm变数，新生成的这个物件称为实体，再透过.mount挂载至指定的节点，v-model则是绑定data的资料状态，当data里面的text有任何更动时，input也会同时做改变View(画面)`。
也可以改写成
JavaScript：

const app = {
  data() {
    return {
    }
  }
}
Vue.createApp(app).mount('#app');

或是

Vue.createApp({
  data() {
    return{
    }
  }
}).mount('#app');

渐进式框架

当初Vue.js并没有这麽的完整，主要核心只有宣告式渲染和元件系统，相较於其他framework，功能比较不完善，但可以任意使用其他第三方工具，Vue.js的团队也依照之後的需求，慢慢的开发出Vue router，还有大型专案会用到的Vuex，建构工具还有Vue CLI内建整和webpack，Vue.js能让使用者依照自己习惯的方式，挑选你所需要的功能，以上为渐进式的解释。

参考来源

重新认识 Vue.js|Kuro Hsu
六角学院
Vue.js