Vue.js 深入响应式原理_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Vue.js 深入响应式原理
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢控制台修改vue组件中data对象里的数组意外失效 --艺灵设计
当前位置：&>>&&&控制台修改vue组件中data对象里的数组意外失效
控制台修改vue组件中data对象里的数组意外失效
摘要：　　最近在学习Vue.js，其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情，比如这篇提到的：修改data对象里面的数组，有的成功有的意外失效......
最近在看Vue.js，然后发现data对象里面的属性并非都可以通过控制台来更新！
按照官方的说法：每个 Vue实例都会代理其 data对象里所有的属性，注意只有这些被代理的属性是响应的......配图一张：
然后艺灵就按照此示例练习了下，最终的结果有点出人意料之外。话不多说，上代码。
二、示例代码
2.1、js源码
&script type="text/javascript"&　var app=new Vue({　　el:'#app',　　data:{　　　a:1,　　　b:'',　　　items:[　　　　{text:'i0'},　　　　{text:'i1'},　　　　{text:'i2'}　　　],　　　todos:{　　　　text1:'t1',　　　　text2:'t2',　　　　text3:'t3'　　　},　　　arrs:[　　　　'Do the dishes',　　　　'Take out the trash',　　　　'Mow the lawn'　　　]　　}　});&/script&
为了更直观的看到效果，有必要在页面中显示下data中的内容。
2.2、html相关代码
&div id="app"&　a:{{a}}　&hr/&　b:{{b}}　&hr/&　items:　&ul&　　&li v-for="item of items"&{{item.text}}&/li&　&/ul&　todos:　&ul&　　&li v-for="item of todos"&{{item}}&/li&　&/ul&　arrs:　&ul&　　&li v-for="item of arrs"&{{item}}&/li&　&/ul&&/div&
虽然此时还是不能直观看到效果，但没关系，刷新下浏览器就O了。我们可以看到这样的界面，配图：接下来我们就按文档中说的，在控制台中来修改下上面的值吧。
三、控制台更新data中的属性值
在浏览器中直接按下f12快捷键即可打开浏览器的调试模式，然后我们点击：Console进入控制台，接下来就可以改代码了。配图：
3.1、控制台修改代码
app.a='10';/*成功*/app.b='b有值了';/*成功*/app.items[1].text='texti1';/*成功*/app.todos.text1='todos666';/*成功*/app.arrs[0]='arrs的值更新成功了没有？';/*失败！*/
在上面的5组修改中，前面4组都成功通过，并且页面上对应的值也被改动了，配图一张：唯独最后一组失败！看官是不是有点疑惑？
没道理呀！其实艺灵也是觉得很奇怪，可能现在看的内容还比较少，无法解释这一现象。但艺灵有一个新的发现。
新发现：再次更新data属性中非arrs的任意一个值，刚修改失败的arrs的值会成功更新！可能不是很好理解，那上图一张：
再说直接点就是：艺灵发现：类似arrs这种的数组直接更新会不生效，此时再更新任意其他的值，arrs的值会跟着更新。
3.2、Vue.set可直接修改刚失败的代码
上面的方法虽然解决了，但多了一步，官方还提供了一个Vue.set，文档地址：cn.vuejs.org/v2/guide/reactivity.html#变化检测问题语法：Vue.set(object, key, value)。经测试发现这个可以直接改掉上面的值。在控制台中直接粘贴代码：Vue.set(app.arrs,0,'arrs的值更新成功了没有？');回车即可。配图：
四、demo页面
如果看官需要亲身体验下又不想手写那么多代码，可以使用艺灵提供的案例，直接在控制台粘贴即可。
4.1、demo展示
----------完----------
转载声明：　　若亲想转载本文到其它平台，请务必保留本文出处！本文链接：/xwzj//478.html若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
上一篇: 　　　下一篇:热门搜索：
您的位置：
Vue.js学习笔记（来自于慕课网的实战教程）
1、new 一个Vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data,methods,watch2、其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法3、Vue对象里的设置通过html指令进行关联4、重要的指令包括v-text
控制显示（条件渲染），元素会从文档流里面删除
紧接在v-if来配合使用
控制显示（条件渲染），通过css的display:none来隐藏
来绑定标签的属性名，可以简写为
:属性名5、&template&
&div id="app"&
&hello&&/hello&
&h1 v-text="title"&&/h1&
&input type="text" name="text" v-model="newItem" v-on:keyup.enter="addNew"&
&li v-for="item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinish(item)"&
{{item.label}}
&/div& &/template&
&script& import Hello from './components/Hello'
export default {
name: 'app',
components: {
data: function(){
title: 'this is a todo list',
label: 'coding',
isFinished: true
label: 'walking',
isFinished: true
methods: {
toggleFinish: function(item){
item.isFinished = !item.isF
this.newItem = item.label
addNew: function(){
this.items.push({ //这里的this是指上面定义的data对象，这个push函数可以把push中的参数（在这里是一个对象）放到items中
label: this.newItem,//可以理解为v-model指令把newItem绑定到了上面的数据data中，也就是说data里面除了label和isFinished之外，还多了一个newItem
isFinished: false
this.newItem = '';
} } &/script&
&style& #app {
font-family: 'Avenir', Helvetica, Arial, sans-
-webkit-font-smoothing:
-moz-osx-font-smoothing:
text-align:
color: #2c3e50;
margin-top: 60 } .finished{
color: } &/style&6、//这是main.js文件 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
//这个new Vue是根组件 // new Vue({ //
el: '#app',//组件要装载的位置，是index.html里的那个id为app的位置 //
template: '&App/&',//装载一个模板 //
components: { App } // })
//全局注册组件的方法 /* 注册一个my-header的组件， 注册组件的时候不用使用new Vue的那种方法，直接使用{}即可 其中，注册组件的时候不用指明组件的挂载点， 也就是说不用写el这个属性
*/ ponent('my-header', {
template: '&p&header&/p&', });
//测试，这是一个根组件 new Vue({
el: '#app',
template: '&h1&succuss, {{word}}&/h1&',
//此时，index.html的那个app就会被替换为我这里的p标签，不过一般我们都不会直接在这里写template，而是直接在挂载点写模板
word: 'hello world2'
//data是组件会用到的数据 });
//这是main.js文件 import Vue from 'vue'
var myHeaderChild = {
template: '&p&I am my header child&/p&' }
//把myHeader作为变量存起来，组件里面还有一个组件my-header-child var myHeader = {
template: '&p&this is my header&my-header-child&&/my-header-child&&/p&',
components: {
'my-header-child': myHeaderChild,
/* 这是一个根组件 因为我们一般不会把所有的组件都注册为全局组件， 所以我们使用components这个属性来注册组件， 这样我们就可以在new Vue这个根组件的内部来使用这个组件了 */ new Vue({
el: '#app',
word: 'hello world2'
components: {//my-header是任意取的配置名
'my-header': myHeader,
//让my-header这个组件关联到这个'my-header配置里面'
} });7、要避免组件的data是引用赋值，即：data: {
d: 2 }应该以函数的形式赋值：data: function(){
} }如果我们通过引用赋值的方式的话，那么，如果一个相同的组件在多个地方使用，但是我只想改变一个地方的组件的data的值，此时，会把所有用到这个组件的地方的data值改变掉8、全局APIVue的实例对象提供的全局方法，例如注册全局组件的ponent方法实例选项创建一个组件的时候，所传入的对象，例如Vue组件的el、data实例属性/方法都是以$符号开头的指令写在组件的模板（template）里面，通过模板与数据交互的方法内置组件：Vue提供的组件，例如：&component&&/component&、&keep-alive&&/keep-alive&&router-view&&/router-view&、&transition&&/transition&组件9、//在App.vue文件里面 /* v-text和v-html用法的区别 使用表达式 */ &template&
&p v-text="hello"&&/p&
&p v-html="hello"&&/p&
{{num + 1}}
{{status ? 'success' : 'fail'}}
&/div& &/template&
&script& export default{
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
} } &/script&10、v-for指令的用法使用这个指令来进行data里面的数组的渲染&template&
&li v-for="item in items"&
{{item.name}} - {{item.price}}
&li v-for="(item, index) in items" v-text="item.name + ' - ' + item.price"&
&li v-for="(item, index) in items"&
{{item.name}} - {{item.price}} {{index}}
&/div& &/template& &script& export default{
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
name: 'apple',
price: '34'
name: 'banana',
price: '50'
} } &/script&11、v-bind:class（或者:class）的用法&template&
&li v-for="(item, index) in items" v-bind:class="{odd:index % 2}"&
{{item.name}} - {{item.price}} {{index}}
&/div& &/template& &script& export default{
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
name: 'apple',
price: '34'
name: 'banana',
price: '50'
} } &/script&其中，index是从0开始计的，odd是一个类名，如果odd冒号后面的东西是0或者false，那么，不添加这个类，如果是非0或者true，那么，添加这个类12、使用v-for来进行data里面的对象的渲染其中的index不一定是数字了，这一点和渲染数组的情况有些不同value也可以替换成item或者其他的//在App.vue文件里面 &template&
&li v-for="(value, index) in objList"&
{{index}}: {{value}}
&/div& &/template& &script& export default{
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
objList: {
name: 'apple',
price: 34,
color: 'red',
weight: 14
} } &/script&13、我们一般都会把不同的组件放在不同的文件里面，而这些保存组件的文件后缀是.vue，一般都会放在src文件夹下面的components文件夹下面例如，这是我的信建立的一个a组件，保存在a.vue文件里&template&
&p&{{content}}&/p& &/template&
&script type="text/javascript"&
export default{
data: function(){
content: 'I am a component'
} &/script&然后，我要在app组件（保存在app.vue文件里）里面去引入上面这个a组件：&template&
&li v-for="(value, index) in objList"&
{{index}}: {{value}}
&componentA&&/componentA&
&/div& &/template& &script& import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
objList: {
name: 'apple',
price: 34,
color: 'red',
weight: 14
} } &/script&14、使用v-for指令来对组件列表循环渲染：&template&
&li v-for="(value, index) in objList"&
{{index}}: {{value}}
&componentA v-for="(value, index) in objList"&&/componentA&
&/div& &/template& &script& import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
objList: {
name: 'apple',
price: 34,
color: 'red',
weight: 14
} } &/script&因为objList有4项，所以，它会循环输出4次a组件15、列表数据同步更新方法例如，使用push可以添加数据进入data里面的属性中&template&
&li v-for="item in items"&
{{item.name}} {{item.price}}
&button v-on:click="addItem"&按钮&/button&
&/div& &/template& &script& import componentA from './components/a.vue' //引入这个a组件，组件名为from前面的名字componentA
export default{
components:{componentA},//在引入之前，要先在当前的组件里先注册这个组件，这句话其实是ES6的缩写，他原来是{componentA:componentA}
data: function(){
hello: '&span style="color:"&world&/span&',
status: true,
name: 'apple',
name: 'banana',
methods: {//在方法里面可以调用组件里面的数据
addItem(){
this.items.push({
name: 'orange',
} } &/script&那么会把name: 'orange' 和 price: 39加入data里面的items数组列表中直接对列表的某一项进行赋值，不会更新列表的数据，可以使用set方法（这是Vue的全局方法）去改变数组列表中的某一项的数据
声明: 91.com所发布的内容均来源于互联网，目的在于传递信息，但不代表本站赞同其观点及立场，版权归属原作者，如有侵权，请联系删除。
信息也是生产力，精简才是硬道理！情报猎手带你突破信息迷雾，每日独家为您锁定最有价值的IT行业新鲜事。打开微信，扫描关注，赢取每月粉丝奖！
三星Note8三星发布会
魅族Pro 7魅族发布会
2017CIC2017CIC
小米5X小米发布会
微博和微信：91门户拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(39a3b583b1418bd4-ua98).
重新安装浏览器，或使用别的浏览器强大Vue.js组件解析 如何注册组件 - 维维软件园
强大Vue.js组件解析 如何注册组件
来源：维维整理作者：维维时间： 20:58:33(0)
强大Vue.js组件解析，组件是Vue.js最强大的功能之一，下面给大家详细介绍下，有兴趣的朋友来详细了解下吧。
什么是组件：
组件是Vue.js最强大的功能之一。组件能够扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
如何注册组件？
需要使用Vue.extend方法创建一个组件，之后使用ponent方法注册组件。Vue.extend方法格式如下：
var MyComponent = Vue.extend({
// 选项...后面再介绍
要是想要其他地方使用这个创建的组件，还得给组件命个名：
<ponent('my-component', MyComponent)
命名以后就能在HTML标签中使用这个组件名称，像使用DOM元素一样。下面来看看一个完整的组件注册和使用例子。
html代码：
&div id=&example&&
&my-component&&/my-component&
var MyComponent = Vue.extend({
template: '&div&A custom component!&/div&'
ponent('my-component', MyComponent)
// 创建根实例
el: '#example'
输出结果：
&div id=&example&&
&div&A custom component!&/div&
组件本身也可以包含组件，下面的parent组件就包含了一个命名为child-component组件，但这个组件只能被parent组件使用:
var child = Vue.extend({
template: '&div&A custom component!&/div&'
var parent = Vue.extend({
template: '&div&Parent Component: &child-component&&/child-component&&/div&',
components: {
'child-component': child
ponent(&parent-component&, parent);
上面的定义过程十分的繁琐，也能够不用每一次都调用ponent和Vue.extend方法:
// 在一个步骤中扩展与注册
ponent('my-component', {
template: '&div&A custom component!&/div&'
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '&div&A custom component!&/div&'
多个组件能够使用同一个挂载点，然后动态的在他们之间切换。使用保留的&component&元素，动态地绑定到它的is特性。下面的列子在同一个vue实例下挂了home、posts、archive三个组件，通过特性currentView动态切换组件显示。
html代码：
&div id=&dynamic&&
&button id=&home&&Home&/button&
&button id=&posts&&Posts&/button&
&button id=&archive&&Archive&/button&
&component :is=&currentView&&&/component&
var vue = new Vue({
el:&#dynamic&,
currentView: &home&
components: {
template: &Home&
template: &Posts&
archive: {
template: &Archive&
document.getElementById(&home&).onclick = function(){
vue.currentView = &home&;
document.getElementById(&posts&).onclick = function(){
vue.currentView = &posts&;
document.getElementById(&archive&).onclick = function(){
vue.currentView = &archive&;
组件和v-for
& my-component v-for=&item in items&&&/my-component&
不能传递数据给组件，因为组件的作用域是独立的。为了传递数据给组件，应当使用props:
&my-component
v-for=&item in items&
:item=&item&
:index=&$index&&
& /my-component&
不自动把 item 注入组件的原因是这会导致组件跟当前 v-for 紧密耦合。显式声明数据来自哪里可以让组件复用在其它地方。
深入响应式原理
在组件绑定数据时，怎么绑定才可以有效，并且能够动态修改、添加属性？看看下面的原理介绍。
怎么追踪变化：把一个不同对象传给vue实例作为data的选项，vue.js将遍历它的属性，用Object.defineProperty将它转换为getter/setter。这是ES5特性，所有vue.js不支持IE8或更低版本。
模板中每个指令/数据绑定都有一个对应的watcher对象，在计算过程中它将属性记录为依赖。然后当依赖的setter被调用时 ，会触发watcher重新计算。流程如下所示：
变化检测问题：vue.js不能检测到对象属性的添加或删除，属性必需要在data上才可以让vue.js转换它为getter/setter模式，才能有响应。例如：
var data = { a: 1 };
var vm = new Vue({
data: data
// `vm.a` 和 `data.a` 现在是响应的
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的
不过，也有办法在实例创建后添加属性并且让它是相应的。可以使用set(key,value)实例方法：
vm. set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的
对于普通对象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的
初始化数据：虽然Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。
不这么做：
var vm = new Vue({
template: '&div&{{msg}}&/div&'
// 然后添加 `msg`
vm.$set('msg', 'Hello!')
应该这么做：
var vm = new Vue({
// 以一个空值声明 `msg`
template: '&div&{{msg}}&/div&'
// 然后设置 `msg`
vm.msg = 'Hello!'
组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。
html代码：
&!-- 实现script定义一个模板 --&
&script type=&x/template& id=&modal-template&&
&!--模板是否显示通过v-show=&show&来设置， transition设置动画效果--&
&div class=&modal-mask& v-show=&show& transition=&modal&&
&div class=&modal-wrapper&&
&div class=&modal-container&&
&div class=&modal-header&&
&!--slot 相当于header占位符--&
&slot name=&header&&
default header
&div class=&modal-body&&
&!--slot 相当于body占位符--&
&slot name=&body&&
default body
&div class=&modal-footer&&
&!--slot 相当于footer占位符--&
&slot name=&footer&&
default footer
&button class=&modal-default-button& @click=&show = false&&OK&/button&
&div id=&app&&
&!--点击按钮时设置vue实例特性showModal的值为true--&
&button id=&show-modal& @click=&showModal = true&&show modal&/button&
&!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性--&
&modal :show.sync=&showModal&&
&!--替换modal插件中slot那么为header的内容--&
&h3 slot=&header&&Custom Header&/h3&
//定义一个插件，名称为modal
ponent(&modal&, {
//插件的模板绑定id为modal-template的DOM元素内容
template: &#modal-template&,
//特性，类型为布尔
type: Boolean,
required: true,
twoWay: true
//实例化vue，作用域在id为app元素下，
el: &#app&,
//特性，默认值为false
showModal: false
.modal-mask {
z-index: 9998;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3
.modal-wrapper {
display: table-
vertical-align:
.modal-container {
width: 300
padding: 20px 30
background-color: #
border-radius: 2
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3
font-family: Helvetica, Arial, sans-
.modal-header h3 {
margin-top: 0;
color: #42b983;
.modal-body {
margin: 20px 0;
.modal-default-button {
* the following styles are auto-applied to elements with
* v-transition=&modal& when their visiblity is toggled
* by Vue.js.
* You can easily play with the modal transition by editing
* these styles.
.modal-enter, .modal-leave {
opacity: 0;
.modal-enter .modal-container,
.modal-leave .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
因为自己在项目中还没有怎么深入使用组件的功能，因此自己对组件的理解也不深入，介绍的有些肤浅，谢谢大家的阅读。
大家还看了：
[访问统计：]
上一篇：下一篇：
该分类还没有添加任何内容！