Vue

0x01-工作原理:0、State:它是一个对象,里面存储的是N个组件共享的数据。1、VueComponents:一堆组件,这些组件需要共享State中的数据。2、dispatch():这是一个API,当调用它之后,就会进入Actions这个步骤。参数:①:执行的函数名,假设这里的函数是add,然后就会去Actions对象中去匹配这个add函数。②:为这个函数参数传递的数据,假设这里的参数是1。2.1、Actions:它里面存储的是一个对象,这个对象中,全是函数,这些函数是要我们自己写的,既然在dispatch()中选择了add函数,那么在这个对象中肯定是要写一个add函数的。并且在这个对象中,函数可以接收到两个参数:①:context->(上下文)。②:value->(就是dispatch()传递的第二个参数:1)。然后我们需要在这个函数中,使用context属性来调用commit()函数。在调用commit()函数时,需要为该函数传递两个参数,请看下面。3、commit():当使用context上下文属性调用commit()方法后,就会进入Mutations这个步骤。在调用commit()函数时,需要为该函数传递两个参数:①:调用Mutations中的哪个函数,肯定是add。②:传递的参数,一般就是Actions中的value属性。3.1、Mutations:它里面存储的也是一个对象,它存储是也是全是函数,这些函数也是我们自己添加的。我们在commit()中选择调用add函数,那么该对象中肯定也要有一个add()函数的。在这个对象中的方法,也可以接收到两个参数:①:state对象。②:value,也就是commit传递的第二个属性。然后,我们就可以在这个函数中直接操作state对象中的属性了。4、render:当State中的属性值发生变化时,就会重新帮我们解析组件。5、Actions和Mutations的区别:如果在调用dispatch()函数时,我们不知道传递一个什么数据,必须要请求后端的接口才能知道传递什么,那么我们就需要在Actions对象中的函数中请求后端接口,然后在调用commit()。或者我们需要进行延时操作,在500毫秒之后在操作State对象中的数据,那么就需要在Actions对象中的函数中进行延时操作,在500毫秒之后直接调用commit()进行操作State对象。那么也就发现,如果有逻辑业务层操作的话,都是在Actions对象函数中完成业务逻辑。而Mutations中的函数,是不要进行业务逻辑的,它负责的就是最终修改State中的数据。如果我们知道初始传递一个什么数据,则可以不进行Actions这一步,直接调用commit()进行Mutations这一步进行修改数据即可。并且它们的函数名也应该有所区分,在Actions中的函数进行小写,而在Mutations中的函数进行大写。6、总结:如果知道初始数据,并且不需要业务逻辑,则可以让组件直接调用commit()函数。如果需要业务处理,则必须让组件调用dispatch()函数,然后在通过上下文调用commit()函数。Mutations这一步骤,才是最终修改State数据的步骤。

2022-2-16 98 0
Vue

在了解Vue中的数据代理之前,我们首先了解一下Object对象下的definePropert()方法。0x01-Object.defineProperty()方法:Object.defineProperty()方法可以用来为对象增加属性,并且被添加属性很特殊,可以设置是否允许值被更改,或者如果访问这个属性的时候,它可以执行什么操作,这个属性的值被更改时,它可以执行什么操作,非常的NB!!1.1-注意:它应该是直接使用Object调用该方法,而不是一个Object类型的实例调用。//错误-不应该使用object类型的实例来调用varobj={};obj.definePropert();//正确-应该使用Object构造对象调用此方法Object.defineProperty();1.2-参数:obj:要定义属性的对象.prop:要添加属性的名称.descriptor:配置项.1.3-配置项:value:1.默认值:undefined。2.描述:被添加属性的值,可以是任何JS中的值。enumerable:1.默认值:false。2.描述:在遍历时,只有enumerable为true,被添加的属性才会出现,否则不出现。writable:1.默认值:false。2.描述:1.只有writable为true时,value的值才可以有效的被更改。2.为false时,修改也不会报错,但是打印该对象会发现值并未修改。get:1.默认值:undefined。2.说明:1.它的值应该是一个函数,当访问被添加的属性时,就会调用该方法。2.该函数的返回值会用作被添加属性的值。set:1.默认值:undefined。2.说明:1.它的值应该是一个函数,当被添加的属性的值发生修改时,就会调用该方法。2.该方法接收一个参数,值就是被新赋予的值。1.4-案例:问题:1.将num变量的值,添加到person对象的age属性中。2.当我们修改num这个变量值时,访问person.age,使它的值也随着num发生改变。3.当我们修改person.age时,使num也随着person.age改变。思路:1.我们只需要为在配置项中添加一个get,每次访问该属性时,都会去访问num这个变量,从而每次输出的都是num的值。2.我们还可以添加set,当修改person.age属性时,将value的参数值赋值给num,使它的值也随其改变。letnum=19;letperson={};Object.defineProperty(person,"age",{//每当访问person.age时,就会执行该方法.//return回的内容,就会当做person.age的值.get(){returnnum;},//当person.age被修改时,就将新值赋予给num.//从而在通过getter访问num时,还是同步的数据.set(value){num=value;}});0x02-Vue数据代理:Vue就用到了数据代理,在我们操作vm.属性时,它就用到了set和get方法,最终操作的就是_data中的数据,(后面仅仅是我猜想)->而_data也用到了代理,当它的值发生变化时,也会通过set方法去修改Dom元素的值,否则怎么会如Vue所介绍,数据驱动视图呢?

2021-12-24 103 0