vue 学习笔记(持续更新)

2018-06-13 admin

其实学习vue最好的办法就是看vue的官方文档,所以我写这个主要是想记录下学习的心路历程[手动滑稽],顺便加深下印象。

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength

  • 也就是说对于数组的操作直接对下标进行操作,vue自身’感知/监控’不到的(具体原因稍后解释),需要主动的去’通知’,通过vue自身实现的一个Vue.$set()
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

  • 那么为什么set方法就是可行的?查找vue 的api文档vue_set这样的一段描述

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)

注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

Object.defineProperty 是仅 ES5 支持,且无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

追踪变化原理

  • 简单的来说就是在页面渲染的过程中,页面的某一部分a使用到 或者是 计算属性中用到了data中的数据b,其实就是调用了getter函数,通知watcher会将b作为a的依赖,一但数据b发生改变其实就是调用了setter,而setter的变化会通知到watcher,进而重新渲染视图。

到此,这个问题基本上就有答案了。

  • 将数组的下标当作当作对象的属性进行类比,当我们添加属性并赋值时,Vue 并不能检测到对象中属性的添加或者删除,但是data中对应的属性确实是变化了,但是这个过程Vue是不可以监控的,需要主动的去通知Vue 将这个属性转化为 __boserver__类型的(vue可以动态响应的数据类型)

补充

Object.observe() 方法用于异步地监视一个对象的修改。当对象属性被修改时,方法的回调函数会提供一个有序的修改流。然而,这个接口已经被废弃并从各浏览器中移除。你可以使用更通用的 Proxy 对象替代。 Object.observe(obj, callback[, acceptList])

  • callback 当对象被修改时触发的回调函数,其参数为:
  • changes 一个数组,其中包含的每一个对象代表一个修改行为。每个修改行为>的对象包含:
*   name: 被修改的属性名称。
*   object: 修改后该对象的值。
*   type: 表示对该对象做了何种类型的修改,可能的值为"add", "update", or "delete"。
*   oldValue: 对象修改前的值。该值只在"update"与"delete"有效。
  • acceptList 在给定对象上给定回调中要监视的变化类型列表

原文链接:https://segmentfault.com/a/1190000015269540

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33947.html

文章标题:vue 学习笔记(持续更新)

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()"...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
回到顶部