0
点赞
收藏
分享

微信扫一扫

vue前言

晗韩不普通 2022-02-14 阅读 63
vue.js

#### Vue基本代码结构

~~~js
const vm = new Vue({
    el:'#app', //所有的挂在元素会被Vue生成的DOM替换
    data:{this->window}, //定义变量, data中的变量之间不能互相访问
    methods:{this->vm}, //定义方法, this.变量名可以访问data中的数据
    props:{}, //可以是数组或者对象类型,用于接收父组件的数据
    watch:{this->vm}, //监听data中数据的变化,监听路由的变化,一个数据影响到多个数据变化
    computed:{}, //计算属性得到的结果缓存,方便下次的使用,多个数据影响一个数据的变化
    render(){},
    //声明周期钩子函数
})
~~~

#### 理解vue的生命周期

初始化:

- beforeCreate:该函数执行结束后,会开始进行数据初始化,会定义data数据、方法以及事件,并且完成数据劫持observe以及给组件实例配置watcher观察者实例,当数据变化,才可以感知数据变化并完成页面渲染。
- created:数据已经挂载,钩子函数里面可以做一些异步操作,并且在钩子函数里更改数据不会影响运行时的钩子函数。目前已经拿到了data下的数据和methods下的方法,可以开始调用方法进行数据请求。
- 执行完毕后,判断是否有el参数,如果有是否有template参数,没有等待调用$mount(el)。确保有了el后,判断template参数选择将template模板转化为render函数,如果没有,直接将获取到的el编译成templae,再转换。
- beforeMounte:created到beforeMounte最主要的工作是将模板或者el转换为render函数。开始渲染render函数。
- mounted:数据已经挂载,真实DOM渲染出来,此时可以对dom进行操作。

运行中:

- beforeUpdate:
- updated:

销毁时:

- beforeDestroy:
- destroy:

##### 说说对Vue的理解

Vue.js是一个开源JavaScript框架,是一个创建单页应用的Web应用框架

#### 什么是MVVM,与MVM的区别

##### 1.MVVM表示的是 Model-View-ViewModel

- Model:模型层,负责处理业务逻辑以及和服务器端进行交互
- View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面
- ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁

##### 2.MVVM和MVM的区别

- MVM

  ![img](https://img2020.cnblogs.com/blog/2048717/202007/2048717-20200726160658605-1269823225.png)

  特点:所有的通信都是单向的

  View将传送指令到控制器,控制器完成业务逻辑后,要求模型的状态进行改变,同时模型将新的数据返回给视图,让用户得到反馈

- MVVM

  ![img](https://img2020.cnblogs.com/blog/2048717/202007/2048717-20200726160737731-663277904.png)

  特点:实施双向的数据绑定,当View在变动的时候自动反应于ViewModel上,反之也是如此。

#### 完整的生命周期函数

- beforeCreated() 在实例创建之间执行,数据未加载的状态
- created() 在实例创建、数据加载之后,能够初始化数据,dom渲染之前执行
- beforeMount() 虚拟dom已经创建完成,在数据渲染前最后一次更改数据
- mounted() 页面、数据渲染完成,真是dom挂载完成
- beforeUpdated() 更新渲染之前触发
- updated() 数据已经更新完成,dom也诚心render完成,更改数据会进行死循环

举报

相关推荐

0 条评论