vue3数据劫持_vue实现keepalive

vue3数据劫持_vue实现keepalive模仿vue的数据劫持,实现mvvm

大家好,又见面了,我是你们的朋友全栈君。

模仿vue的mvvm实现方式,实现数据渲、改变data以及v-model
源码地址

  script src="Tvue.js"></script>
  <body>
    <div id="app">
      {
   
   {message}}
      <p>{
   
   {message}}</p>
    </div>
  </body>
  <script>
    let vm = new Tvue({
      el: "#app",
      data: {
        message: '测试'
      }
    })
  </script>
复制代码

先实现数据替换功能

  class Tvue {
  constructor(options) {  // new Tvue里的值
    this.$options = options
    this._data = options.data  // 参考源码,避免与data重名
    this.compile(options.el)  // 查找替换
  }
  compile(el) {
    //  作用域 范围内查找   
    let element = document.querySelector(el)  // 获取<div id="app"></div>
    let childNodes = element.childNodes  // 获取子节点
    Array.from(childNodes).forEach((node) => {
      // console.log(node, 'nodeType 属性可用来区分不同类型的节点,比如 元素, 文本 和 注释。')
      if (node.nodeType === 3) {
        // 文本替换
        let nodeContent = node.textContent
        let reg = /\{\{\s*(\S*)\s*\}\}/  // 考虑插值表达式的前后空格
        if (reg.test(nodeContent)) {  
          node.textContent = this._data[RegExp.$1]
        }
      } else {
        
      }
    })
  }
}
复制代码

打开浏览器mvvm模式已经实现,有个问题是

{
{message}}

还没有被替换,还需要使用递归实现多层嵌套查找替换

  compileNode(element) { // 递归实现多层嵌套查找替换
    let childNodes = element.childNodes // 获取子节点
    Array.from(childNodes).forEach((node) => {
      // console.log(node, 'nodeType 属性可用来区分不同类型的节点,比如 元素, 文本 和 注释。')
      if (node.nodeType === 3) {
        // 文本替换
        let nodeContent = node.textContent
        let reg = /\{\{\s*(\S*)\s*\}\}/ // 考虑插值表达式的前后空格
        if (reg.test(nodeContent)) {
          node.textContent = this._data[RegExp.$1]
        }
      } else if (node.nodeType === 1) {  // 处理标签

      }
      if (node.childNodes.length > 0) {
        this.compileNode(node)
      }
    })
  }
复制代码

OK,截止目前可以实现多层数据嵌套

接下来实现v-model

let attrs = node.attributes;
Array.from(attrs).forEach(attr => {
  let attrName = attr.name;
  let attrValue = attr.value;
  if (attrName.indexOf("t-") == 0) {
      attrName = attrName.substr(2);
      if (attrName == "model") {
          node.value = this._data[attrValue];
      }
      node.addEventListener("input", e => {
          this._data[attrValue] = e.target.value;
      })
      new Watcher(this, attrValue, newValue => {
          node.value = newValue;
      });
  }
})
复制代码

下一篇


实现简约不简单的vuex

转载于:https://juejin.im/post/5cf79260518825399965a582

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106783.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • spring整合springmvc和hibernate

    上篇文章使用maven搭建了web环境,这篇来记录下如何使用spring整合springmvc和hibernate,亦即spring+springmvc+hibernate框架整合。第一步:首先配置

  • 如何在Ubuntu上安装GCC编译器

    如何在Ubuntu上安装GCC编译器如何在Ubuntu上安装GCC编译器1.首先更新包列表sudoaptupdate2.安装build-essential软件包:sudoaptinstallbuild-essential3.验证GCC编译器是否已成功安装,请使用gcc–version命令打印GCC版本root@ubuntu:/home/csd#gcc–version…

  • DLL注入explorer.exe进程[通俗易懂]

    DLL注入explorer.exe进程[通俗易懂]**DLL注入explorer.exe进程**  最近一直在学习dll注入远程进程的相关知识,于是有了这篇文章。通过注入的方式会运行程序,在资源管理器中是看不到,相关的进程的,这为程序的隐藏提供了极大的便利。一、新建dll动态链接库,然后在dllmain.cpp文件中的“caseDLL_PROCESS_ATTACH:”下输入当你dll被进程加载时要执行的代码。这里我们用“Messag…

  • java int最大值和最小值_excel中求最大值和最小值

    java int最大值和最小值_excel中求最大值和最小值Java中Integer的最大值和最小值.JavaByte的最大值和最小值.Javafloat的最大值和最小值.Javalong的最大值和最小值.

  • vue.js 三种方式安装(vue-cli)

    vue.js 三种方式安装(vue-cli)Vue.js(读音/vjuː/,类似于view)是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。下面介绍三种Vue.js的安装方法:1.独立版本我们可以在Vue.js的官网上直接下载vue…

  • pychram2022.01.13激活码_在线激活

    (pychram2022.01.13激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号