Vue知识点

1、对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。


2、双向绑定v-model实现原理

参考:vue数据双向绑定的实现原理以及步骤分析

⭐vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调

  • 什么是数据劫持? 当访问或设置某个对象的属性时,都会触发相应的函数,并在函数里返回或设置属性的值。 (Object.defineProperty(obj,prop,descriptor)里的get/set函数)
  • 什么是发布者-订阅者模式? 发布-订阅者模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在JavaScript开发中,我们一般用事件模型来替代传统的发布-订阅模式。

⭐Object.defineProperty来实现数据劫持

Object.defineProperty(obj,prop,descriptor) 参数 obj:目标对象 prop:需要定义的属性或方法的名称 descriptor:目标属性所拥有的特性 可供定义的特性列表 value:属性的值 writable:如果为false,属性的值就不能被重写。 ⭐get: 一旦目标属性被访问就会调回此方法,并将此方法的运算结果返回用户。 ⭐set:一旦目标属性被赋值,就会调回此方法。 configurable: 如果为false,则任何尝试删除目标属性或修改属性性以下特性(writable, configurable, enumerable)的行为将被无效化。 enumerable: 是否能在for...in循环中遍历出来或在Object.keys中列举出来。

⭐JS原生实现

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

3、vue生命周期

四个阶段

1)实例创建 2)DOM渲染 3)数据更新 4)销毁实例

八个钩子函数

1.beforeCreate --创建前 触发的行为:vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 在此阶段可以做的事情:加loading事件

2.created --创建后 触发的行为:vue实例的数据对象data有了,$el还没有 在此阶段可以做的事情:解决loading,请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前 触发的行为:vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换 在此阶段可以做的事情:。。。

4.mounted --渲染后 触发的行为:vue实例挂载完成,data.filter成功渲染 在此阶段可以做的事情:配合路由钩子使用

5.beforeUpdate --更新前 触发的行为:data更新时触发 在此阶段可以做的事情:。。。

6.updated —更新后 触发的行为:data更新时触发 在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)

7.beforeDestroy —销毁前 触发的行为:组件销毁时触发 在此阶段可以做的事情:可向用户询问是否销毁

8.destroyed —销毁后 触发的行为:组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 在此阶段可以做的事情:组件销毁时进行提示


4、Vue组件间的参数传递

1.父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据; 子组件传给父组件:$emit方法传递参数 2.非父子组件间的数据传递,兄弟组件传值 eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)


5、Vue的路由实现:hash模式 和 history模式

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取; 特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。 hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。 history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”


6、vue路由的钩子函数

首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。 beforeEach主要有3个参数to,from,next: to:route即将进入的目标路由对象, from:route当前导航正要离开的路由 next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。


7、assets和static目录区别

共同点:都是放静态资源的 不同点:

  • static:目录下文件不会被webpack处理,打包后直接输出到dist/static中;任何放在 static 中的文件需要以绝对路径的形式引用:/static/[filename]。
  • assets: 目录下文件会被webpack处理,重新编译

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue生命周期详细图解

    beforeCreated 第一个生命周期函数 表示实例完全被创建出来之前,会执行它 此时data 和 methods 中的 数据都还没有没初始化

    杨肆月
  • [穿越机]组件介绍

    螺旋桨、电机、点调、电池 飞起来的原因:升力>重力 连接顺序:电池-电调-电机-螺旋桨

    杨肆月
  • (自制翻译)如何解决在vue中this报错undefined

    当你开心地在编程,惊叹于vue的神奇,这时你却遇到这样的情况: 你的vue应用无法正常工作,你收到的报错是:this is undefined

    杨肆月
  • 银行的云计算应用

    1963 年,DARPA(美国国防高级研究计划局)向麻省理工学院提供了约 200 万美元的津贴,启动了著名的 MAC 项目,要求麻省理工开发“多人可同时使用的电...

    用户6900693
  • 一名优秀的产品经理

    摘要:  如今,用户体验这个词已经渗透到越来越多的行业,贯穿于整个企业的研发、推广和市场运作。例如,买 iPhone,从打开包装盒的一刹瞬间;到海底捞吃货,从热...

    阳光岛主
  • django celery的分布式异步之路(二) 高并发

    当你跑通了前面一个demo,博客地址:http://www.cnblogs.com/kangoroo/p/7299920.html,那么你的分布式异步之旅已经起...

    用户1225216
  • 【Flutter 实战】自定义文本步进组件

    老孟Flutter
  • Data Guard搭建困境突围(一)(r10笔记第17天)

    在Oracle 10g的中搭建Data Guard环境真是一个纠结,目前大体都是采用两种方式,一种是rman备份,一种是duplicate的方式,但是这...

    jeanron100
  • 问答集锦:DTC直接转矩控制

    直接转矩控制-也称DTC –是目前世界上已开发的最先进的交流传动技术。 什么是直接转矩控制? 直接转矩控制–也称 DTC – 是由ABB开发的一种最新的交流传动...

    机器人网
  • Glide二次封装库的使用

    更多代码可以查询本人GitHub:欢迎阅读,star点起来。 Glide二次封装库源码

    先知先觉

扫码关注云+社区

领取腾讯云代金券