原生JS实现vue中data值的修改与渲染

前言

砖搬多了就得想想怎么造砖，Vue使用多了，也得想想Vue是咋实现，Vue用着确实舒服，仔细了解一下，背后做的操作也太多了吧，但是再多的操作也是一个一个积累起来的吧！
先记录一下怎么实现data中值的渲染与修改

class Wvue extends EventTarget {constructor(option) {super()console.log(option)this.$options = optionthis.compile()this.observe(this.$options.data)}observe(data) {let keys = Object.keys(data)console.log(keys)keys.forEach(key => {this.defineData(data, key, data[key])})}// 数据劫持函数defineData(data, key, value) {let that = thisObject.defineProperty(data, key, {configurable: true,enumerable: true,get() { //获取data中数据时触发// console.log('get数据了')return value},set(newValue) { //给data中数据赋值时执行console.log('哈哈哈，我设置数据了')let event = new CustomEvent(key, { //向compileNode函数中传递要改变的值detail: newValue})console.log(this)// this.dispatchEvent(event)//注意这里的this指向vm.$options.datathat.dispatchEvent(event)value = newValue}})}compile() {let el = document.querySelector(this.$options.el)this.compileNode(el)}compileNode(el) {let childNodes = el.childNodeschildNodes.forEach(node => {if (node.nodeType === 1) {//标签if (node.childNodes.length > 0) { //如果标签里还有嵌套标签或文本就继续调用this.compileNode(node)}} else if (node.nodeType === 3) {//文本节点console.log(node)let reg = /\{\{\s*(\S+)\s*\}\}/glet textContent = node.textContentconsole.log(textContent)if (reg.test(textContent)) {console.log('存在花括号')let $1 = RegExp.$1node.textContent = node.textContent.replace(reg, this.$options.data[$1])this.addEventListener($1, e => {console.log(e.detail)//这里是第二次渲染，要把新值赋值给data中的旧值let oldValue = this.$options.data[$1]// console.log(oldValue) //打印出data中的旧值let reg = new RegExp(oldValue)node.textContent = node.textContent.replace(reg, e.detail)//重新渲染视图})}}})}
}

 <div id="app">{{message}}<div class="content">{{htmlData}}</div></div><script src="./mvvm.js"></script><script>let vm = new Wvue({el: '#app',data: {message: '加油',htmlData: 'hello'}})setTimeout(() => {vm.$options.data.message = '我要修改数据了'})</script>

原生JS实现vue中data值的修改与渲染相关推荐

[vue] vue中data的属性可以和methods中的方法同名吗？为什么
[vue] vue中data的属性可以和methods中的方法同名吗?为什么源码中的 initData() 方法 if (methods && hasOwn(methods, ke ...
vue中data数据之间如何赋值
vue中data数据之间如何赋值前言实现方式前言最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. ...
js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
Moment.js在Vue中使用
Moment.js在Vue中使用 1. 安装依赖包 npm install moment --save 2. main.js中引入 import moment from 'moment' Vue.pr ...
js 或者vue中for循环去掉最后一个逗号
js 或者vue中for循环去掉最后一个逗号一个感觉很简单的问题,刚开始我没有思路,现在也没有更好的思路问题描述: 后端返回的一个数组,前端这边需要循环把名字展示,要求在展示时,每个名字后用** ...
Vue 中data 和 data() 区别
Vue 中data 和 data() {return {};}区别一般简单Vue实例(常见教程视频中) new Vue({el: "#id",data: {message: &q ...
js删除对象中所有值为null和undefined的属性
和后台对接的时候的需求,他们不希望我传入那些值为null和undefined的属性,那我就先删除了吧. var obj = {aaa: 1,b: null,ccc: 'js删除对象中所有值为null的 ...
vue中怎么点击修改文字_vue中如何实时修改输入的值
vue中如何实时修改输入的值经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
原生js 或vue实现60分钟倒计时案例
使用场景类似于订单倒计时,或答题倒计时,代码如下在Vue中封装了如下的方法 data () {return {countdownTxt:'',//要显示的倒计时文案};}, // 定义一个方法方 ...

原生JS实现vue中data值的修改与渲染

前言

原生JS实现vue中data值的修改与渲染相关推荐

最新文章

热门文章