阅读 67

了解源码实现原理,慢慢更新

一  vue中如何实现data数据的的方法

let data = {
  msg: "hello"
};

let text = "{{msg}} world";

function compileText(data, text) {
  // 想想怎么实现
}

text = compileText(data, text);
// 想输出 => hello world
console.log(text);
复制代码

这里的逻辑并不难,无外乎先找到{{msg}},然后将整那个字符串替换成data.msg的值

let data = {  
  msg: 'hello'
}
let text = '{{msg}} world'
function compileText(data, text) {  
  let reg = /{{([\s\S]*?)}}/g
  let msg = text.replace(reg, (...args) => {    
    let value = data[args[1]]    
    return value  
  })  
  return msg
}
text = compileText(data, text)
console.log('text_________', text)
复制代码

二 vue中computed与watch之间的区别

刚开始总是傻傻分不清到底在什么时候使用watch,什么时候使用computed。这里大致说一下自己的理解

watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,主要用于监听某个参数的变化然后再执行某一些事件动作,不存在缓存。

1 不支持缓存,数据变,直接会触发相应的操作;

2 watch支持异步; 

3 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;当一个属性发生变化时,需要执行对应的操作;一对多; 

4 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数:

computed 主要用于监听某个值的变化,然后返回一个新的值,有缓存,好处在于,如果当前返回的数据相同,是会变缓存,不需要重新渲染,有利于减少页面重新渲染的操作

1 支持缓存,只有依赖数据发生改变,才会重新进行计算

2 不支持异步,当computed内有异步操作时无效,无法监听数据的变化

3 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

5 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

三 vue中v-model的具体实现方法

v-model是一个指令,限制在input、select、textarea、components中使用,修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。它其实是一个语法糖,接下来我们就来分析 v-model 的实现原理:

1.在表单元素上做了事件监听(监听input、change事件)

2.如果值发生变化时,在事件回调函数把最新的值设置到vue的实例上

3.因为vue的实例已经实现了数据的响应化,

它的响应化的set函数会触发,通知界面中所有模型的依赖的更新,所以界面中的,跟这个数据相关的部分就更新了

四 vue中nextTick的具体实现方法

实际上,nextTick(callback)类似于Promise().resolve().then(callback)或者setTimeout(callback,0)

文章分类
前端
文章标签