持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

介绍

    vue.js是用于构建交互式的web界面的库

    它提供了MVVM数据绑定和一个可组合的组件系统，具有简单灵活的API，从技术上，VUE.js集中在MVVm模式上的视图
模型层，并通过双向数据绑定链接视图和模型

    实际的DOM操作和输出格式被抽象出来的指令(属性)和过滤器，相比其他的MVVM框架，VUE.js更容易上手

    Vue.js是一个用于创建Web交互界面的库，它让你通过简单而灵活地API创建由数据驱动的UI组件

原理图

原理图解释

ViewModel封住逻辑，实现视图和数据模型的双向绑定（内核类似于React中的受控组件）
View是视图
Model是数据模型

Vue特点

简洁：HTML模板+JSON数据，再创建一个简单的Vue实例，就是一个Vue项目
数据驱动：自动追踪依赖的模板表达式和计算属性
组件化：用解释、可复用的组件来构造界面
轻量：大约24kb min+gaip；无依赖
快捷：精确有效的异步批量DOM更新
模块友好：通过NPM或Bower安装无缝融入工作流

对比React

构造器

在实例化Vue时，需要传入一个选项对象，他可以包含数据、模板、挂载元素、方法、生命周期、钩子函数等选项
Vue3创建实例的时候通过Vue.createApp创建对象

生命周期

Vue2

    从new Vue开始到createVue为实例化期
    mounted到beforeDestory为生产期
    最后为销毁期
    
newVue：实例化
Observe Data：数据对象
Init Events：事件对象
"el"option:判断是否存在内部挂载：
    如果有，判断是否有模板，直接挂载即可；如果是外部挂载在对象写完之后通过.$mount(el)进行挂载
"template"option:判断是否有模板
如果有模板通过Render方法生成虚拟Dom
如果没有模板就直接输出在HTML中

mounted生存期：判断数据是否更新
更新前调用beforeUpdate
DOM re-render将虚拟DOM转化为真实DOM
更新后调用updated

语法

文本(差值)：双大括号会将数据解释为纯文本，而非html，可以使用:
    <div v-html="rawHtml"></div>//按照属性写，尽量不用
    <div>{{rawHtml}}</div>//按照文本写

动态属性:v-bind绑定动态属性<img v-bind:src="src" alt="">
//""中的src为图片路径，需要使用打包后的地址(相对html文件路径)

js:不允许使用if else语句，可以使用表达式

指令：
    带有v-前缀的特殊属性,指令属性的值预期是单一js表达式；可以缩写为@

过滤器：
    可以使用自定义过滤器，一些常见的文本格式化，可以添加在mustache差值的尾部，由|隔开