PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >Vue.js > 正文

归纳整理VUE实例参数与MVVM模式知识点

转载2022-08-09 17:37:381098 + Vue前端学习QQ群(点击入群)
本篇文章给大家带来了关于vue的相关知识,其中主要介绍了关于vue实例参数以及MVVM模式的相关问题,实例化一个Vue对象,参数是一个选项对象,下面一起来看一下,希望对大家有帮助。

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

【相关推荐:javascript视频教程web前端

配置参数

实例化一个Vue对象,参数是一个选项对象,下面将会对其中包含的选项做些简单的说明。

new Vue({
  options})
登录后复制

在Vue实例中可以通过this.$options查看实例的配置项

在这里插入图片描述

数据相关选项

选项说明
data声明需要响应式绑定的数据对象
props接收来自父组件的数据
propsData创建实例时手动传递props,方便测试props
computed用于声明计算属性
methods用于定义Vue实例的方法
watch侦听属性,监控 Vue 实例上的数据变动,并调用其回调函数

DOM相关选项

选项说明
el声明Vue根组件的挂载点(根组件特有)
template用于挂载元素的字符串模板
render渲染函数,用于创建虚拟DOM,是字符串模板的替代方案
renderError仅用于开发环境,在render()出现错误时,提供另外的渲染输出

生命周期钩子相关选项

选项说明
beforeCreate发生在Vue实例初始化之后,data observer和event/watcher事件被配置之前
created发生在Vue实例初始化以及data observer和event/watcher事件被配置之后
beforeMount挂载开始之前被调用,此时render()首次被调用
mountedel被新建的vm.$el替换,并挂载到实例上之后调用
beforeUpdate数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前
updated数据更改导致虚拟DOM重新渲染和打补丁之后被调用
activatedkeep-alive组件激活时调用
deactivatedkeep-alive组件停用时调用
beforeDestroy实例销毁之前调用,Vue实例依然可用
destroyedVue实例销毁后调用,事件监听和子实例全部被移除,释放系统资源

资源相关选项

选项说明
directives配置局部注册的自定义指令
filters过滤器,针对一些数据进行筛选、过滤、格式化等相关的处理,过滤器是一个带有参数和返回值的方法 ,只能用在{{}}和v-bind里面。
components配置局部注册组件

组合选项

选项说明
parent指定当前实例的父实例,子实例用this.$parent访问父实例,父实例通过$children数组访问子实例
mixins将属性混入Vue实例对象,并在Vue自身实例对象的属性被调用之前得到执行(组件的多继承)
extends用于声明继承另一个组件,从而无需使用Vue.extend,便于扩展单文件组件(组件的单继承)
provide&inject2个属性需要一起使用,用来向所有子组件注入依赖

其它选项

选项说明
name允许组件递归调用自身,便于调试时显示更加友好的警告信息
delimiters改变模板字符串的风格,默认为{{}}
functional让组件无状态(没有data)和无实例(没有this上下文)
model允许自定义组件使用v-model时定制prop和event
inheritAttrs默认情况下,父作用域的非props属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时,可以将该属性设置为false关闭这些默认行为
comments设为true时会保留并且渲染模板中的HTML注释

了解MVC

Model、View、Controller,分别表示数据、视图、控制器。其实这只是一种设计思想,

Model:数据模型,用来存储数据

View:视图界面,用来展示UI界面和响应用户交互

Controller:控制器(大管家角色),监听模型数据的改变和控制视图行为、处理用户交互

MVVM模式

M(model):代表的是数据

V(view):代表的是视图(页面)

VM(viewmodel):代表的是视图模型,作用:用来管理视图和模型的转换

MVVM是MVC的增强版,实质上和MVC没有本质区别,只是代码的位置变动而已

在这里插入图片描述
简单来说就是视图发生改变时模型也会发生改变,模型发生改变时视图也会发生改变,这就是vue的数据双向绑定
关键点在于 data 如何更新 view,因为 view 更新 data 其实可以通过事件监听即可,比如 input 标签监听 input 事件就可以实现了

双向绑定步骤:

  • 实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

  • 实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

  • 实现一个解析器 Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。

vue的双向绑定原理:

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

【相关推荐:javascript视频教程web前端

以上就是归纳整理VUE实例参数与MVVM模式知识点的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐