Vue概览

Vue是什么

Vue是一个基于MVVM的前端框架，目前有两个版本（2.x和3.x）。目前学习的是Vue2.x的特性，3.x对2.x有更好的改进。在前端框架出现以前，前端工程师编写代码的思路是事件驱动，围绕事件来展开。Vue鼓励开发人员使用数据驱动的方式进行开发，围绕数据状态来编写代码。

事件驱动的开发流程：

1. 编写静态页面；
2. 给对应元素绑定对应的事件；
3. 实现事件对应的功能，如获取数据，更新页面等等；
4. 手动将计算后的数据更新到页面中；

数据驱动的开发流程：

1. 设计数据结构；
2. 完成静态页面，同时将数据和事件绑定到页面中；
3. 事件绑定的方法（methods）中完成相应的逻辑处理；

区别：

1. 事件驱动以事件为核心，事件如何触发，触发后应该进行怎样的操作，与用户的交互密切相关；数据驱动以数据的维护为核心，更多的考虑数据在什么时候得到正确的改变，而无需过多的考虑UI的变化和事件的监听。
2. 数据驱动需要对一个页面进行数据结构的抽象，我们应该如何设计一个页面的数据结构。

MVVM原理

MVVM(Model-View-ViewModel)是一种软件架构模式。

• Model: 模型层，负责处理业务逻辑以及和服务器端交互。
  • Wiki: 模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
• View: 视图层，负责将数据模型转化为UI展示出来。
  • Wiki: 视图是用户在屏幕上看到的结构、布局和外观（UI）。
• ViewModel: 视图模型层，连接View和Model，是两者通信的桥梁。
  • Wiki: 视图模型是暴露公共属性和命令的视图的抽象。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

Vue专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。

在Vue中，View对应DOM（Document Object Model），通过vm.$el可以访问到；Model对应Vue实例的data数据对象，通过vm.$data可以访问到；每个Vue实例本质上就是一个ViewModel，由Vue提供的双向绑定机制实现View中触发的事件改变Model状态的变化，Model状态的变化响应到View上。

---

Vue实例

​ Vue实例本质是一个ViewModel，在Vue实例中对View和Model进行维护。实际开发中，Vue创建的是一个SPA（Single Page Application，单页应用），整个应用通过一个页面进行展示，通过路由找到URL对应的组件对页面进行局部替换，然后渲染展示给用户。这样的好处是局部刷新提升用户的访问速度，页面切换的动画更好实现。但缺点在于，SPA不利于SEO（Search Engine Optimization），由于都在一个页面进行展示，因此首页加载的资源较多，响应速度慢。

​ 一个SPA的典型组成结构如下：

根实例
├─ App.vue
    ├─ Page1
    │  ├─ subPage1
    │  ├─ subPage2
    ├─ Page2
    ├─ Page3
	 ...

// 创建一个组件Vue实例
let vm = new Vue({
    // 常用的配置
    // 父组件传入的数据
    props: {
        
    },
    components: {
        // 局部注册组件
    },
    // Model---数据对象
    data () {
        return {
            // 页面中涉及的数据
        }
    },
    methods: {
        // 对data中数据对象属性的操作
    },
    computed: {
        
    },
    watch: {
        
    },
    // 生命周期钩子
    beforeCreate() {
        
    }
})

// 创建一个根实例
let vm = new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App)  
}

Vue指令

---