mvvm框架
首先想象两个物体A,B,中间是由两根管子链接起来,用来相互之间传递数据,有点类似于客户端与服务器。
但是中间还有一个及其重要的东西可以理解为枢纽或者控制器(大爷的,千万别搞成mvc设计模式)
有一个数组array,里面的是初始化数据
首先写一个函数watcher用来接听
写一个set函数用来设置也可以理解为重新渲染数据
1,假设A物体与B物体都是一个input,它接收一个input事件,这个事件每次触发的时候都有一个回调函数直接会调用这个watcher函数,然后watcher函数会更改数组里面的原始数据,然后又会触发set函数,用来重新渲染B物体里的数据
以上是单向的A物体改变B物体里的数据,
当然B想改变A也就是同样的道理。
那么问题来了,watcher如何才可以知道谁是改变值,谁是被改变值?
由于A与B都是对象,我们可以给他们设置一个get方法接受被别人改变
不管A与B谁想改变谁,都必须触发watcher函数,接着再触发set函数。
这下问题的关键来了,一旦set函数触发,就必须触发A与B的get方法重新渲染。
这就肯定会导致找不到get方法,因为作用域的关系,
好的,我们完全可以重新改造以下一开始提到的那个数组,数组里面有若干个对象,每一个对象必然有一个属性叫数据,有一个方法叫get
arr[
{
data:message,
get:function
}
]
我们这个set函数就是调用数组里的对象的get方法把新的data数据重新赋值给所有的A和B。
当然,方便理解有点类似于两个人拿qq直接对话,不管两个人发什么消息,两个人手机上所呈现的内容都是一模一样的。
好的,这里首先进行第一步优化,当数据发生改变的时候,我们要判断data里的数据是否与A与B里的内容相等,若相等set函数就没必要重新渲染某个物体的数据了。
写到这里,可以说已经给大家留下了巨大的坑,可能会误导大家。
对于vue.js绝对不可能这样搞得,vue.js里面的数据会重新一个一个的枚举出来,不知道会不会挂载到一个数组里面,里面有一个object.developments方法,忘记了应该是这个英语单词,不确定。
里面有实实在在的get方法与set方法,用来得到与设置自己的数据
并且vue.js是采用虚拟dom的概念,我勒个去,至今有点不是特理解
vue.js还是个渐进式的框架,可以用来杀猪也可以杀鸡。
里面的组件化开发,不得不说利于管理,但是到小程序里面打包的时候还是个坑比较多的地方。
今天晚上不知道为啥子,失眠。唉!
各位大神路过请不要喷,我知道我写的文章和一坨差不多,新手就请笑笑而过