- 综合排序
- 最热优先
- 最新优先
- 来自专栏女程序员的日常_Lin
手写vue框架（一）
定义一个类 — vue用法如下 let app = new Vue({ el : '#app', data : { msg : 'hello world', deep : { a:1, b:2 } } }) 那么我们首先要创建一个vue类： class Vue{ constructor(options){ const $options = options; //... } } 接下来进行数据劫持： class Vue{ constructor(options){ const set : function proxysetter(newVal){ target[sourceKey][key] = newVal } }) } 在vue 的constructor中调用： class vue { constructor(options){ const vm = this; // 构建实例上的$options
1K30发布于 2019-07-19 - 来自专栏生如夏花绚烂
手写Vue数据绑定
小试牛刀 我们先来看如下vue实例有什么属性 var vm = new Vue({ el:'#app', data:{ name:'hello', sex:1 } }) console.log(vm); 可以看到我们设置的data属性被提升到Vue 实例上了 Vue $attrs: (...) 继续往下面看我们发现他使用了代理，将data的属性代理到vue上，所以才能进行this.属性名进行访问或设置 ... 实例，构造方法接收options class Vue{ constructor(options){ this.
1.1K20编辑于 2022-09-08 - 来自专栏杨不易呀
【手写Vue】-Vue双向数据绑定原理
Vue响应式的原理(数据改变界面就会改变)是什么? 时时监听数据变化, 一旦数据发生变化就更新界面, 这就是Vue响应式的原理。 Vue是如何实现时时监听数据变化的 通过原生JS的defineProperty方法, 通过get和set方法来监听数据的变化。 Vue双向数据绑定原理-下这一篇文章主要讲解Vue双向数据绑定的原理，主要是通过Object.defineProperty()来实现的，这里我们手写Vue双向数据绑定的原理。
81731编辑于 2023-11-17 - 来自专栏『学习与分享之旅』
【手写Vue】-手撕Vue-构建Vue实例
前言 要想使用Vue必须先创建Vue的实例, 创建Vue的实例通过new来创建, 所以说明Vue是一个类, 所以我们要想使用自己的Vue, 就必须定义一个名称叫做Vue的类。 只要创建好了Vue的实例，Vue就会根据指定的区域和数据，去编译渲染这个区域，所以我们需要在自己编写的Vue实例中拿到数据和控制区域，去编译渲染这个区域。 注意点：Vue实例会将传递的控制区域和数据都绑定到创建出来的实例对象上（$el/$data） <script> let vue = new Vue({ el: document.querySelector $el); console.log(vue.$data); </script> 注意点介绍完了，我们开始手撕Vue吧。 经过上面的分析，我们知道Vue是一个类，所以我们需要定义一个名称叫做Vue的类，我这里叫 Nue。
32110编辑于 2023-11-17 - 来自专栏青笔原创
手写 Vue （一）：虚拟 DOM
前言 最近公司面试了一些中高级前端，由于公司技术栈以 Vue 为主，而对于中高级前端，必不可少要问及 Vue 源码的问题。 本文以及接下来一系列文章，尝试将 Vue 源码拆分成独立的技术点，并动手编码实现。 如何编写一个 Vue 框架? 按照这个逻辑，那么，Vue 的核心功能是什么？ Vue2 为例，创建一个最简单的 Vue 应用的代码如下：
<script src="<em>vue</em>.js"></script> <script> var vm = new Vue.prototype.99830发布于 2020-12-09 - 来自专栏青笔原创
手写 Vue （二）：响应式
响应式的本质 提到 Vue 的响应式，通常指的是视图跟随数据的改变而更新。开发上带来的便利是，在需要更新视图呈现时，只需修改视图渲染所需要的数据即可，而不用手动操作DOM。 为了代码更加通用，以用于任意对象，可以编写一个函数defineReactive(obj, key, update)(函数名参考了 Vue2 的定义，读者可以在 Vue2 源码中搜索该函数)。 基于虚拟DOM的视图更新 在《手写 Vue （一）》中，我们实现了基于虚拟 DOM 的视图挂载。现在结合响应式实现虚拟 DOM 的到真实 DOM 的响应式更新。 $el) } Vue.prototype.$mount = function (id) { this. 如果看到显示内容即时更新为你修改的内容，那么，恭喜你成功做到了和 Vue 一样的响应式视图更新。
91620发布于 2020-12-09 - 来自专栏『学习与分享之旅』
【手写Vue】-手撕Vue-编译指令数据
所以本章节主要处理的方法则是 buildElement 方法，我们先分析一下我们所拿到的数据在进行编码，这样会更加清晰一些。
28400编辑于 2023-11-17 - 来自专栏『学习与分享之旅』
【手写Vue】-手撕Vue-监听数据变化
在我们文章的开始，我写了一个 Vue 双向数据绑定原理的文章当中封装了一个 Observer 类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。
36962编辑于 2023-11-17 - 来自专栏前端面试题总结
手写vue-router核心原理
最近也在观察vue3新特性，抽空玩一玩嵌套路由的vue-router，直接上代码项目目录结构图片代码展示app.vue<template>
<</template>vue全家桶视频讲解：进入学习js文件main.jsimport Vue from 'vue'import /vue-router";import Index from "../views/Index.vue";import Person from ".. 这里先借助Vue的工具Vue.util.defineReactive实现数据响应式，后续再手撕这个库import routerLink from ". ) { Vue = _Vue // Vue全局混入，等new Vue中的router实例创建之后挂载到Vue上 Vue.mixin({ beforeCreate() { if (thisthis is personInfo page
56920编辑于 2022-09-26来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-实现计算属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本模板</title> <script js/nue.js"></script> </head> <body>
<script> let vue 好了，我们现在已经将计算属性的内容添加到了 $data 中，那么我们就可以在 getContent 中获取到计算属性的值了，打开浏览器，查看一下效果： 到这里手写 Vue 就告一段落了，在后面我会在新开辟一个篇章 ，来介绍 Vue 当中的 Vuex。{{ getName }}
493141编辑于 2023-11-17来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-编译模板数据
经上一篇编译指令数据后，我们已经可以将指令数据编译成具体需要展示的数据了，上一篇只是编译了指令数据，还没有编译模板数据，这一篇我们就来编译模板数据。
33951编辑于 2023-11-17来自专栏全栈程序员必看自己动手写Vue插件Toast
<style> .vue-toast { width: 100%; height: 100%; position: fixed; top: 0px; left { top: 50%; } .vue-tip.tip-bottom { bottom: 50px; } .vue-tip.tip-top { 1、创建构造器，定义好提示信息的模板 let toastTip = Vue.extend({ template: ` <div class="<em>vue</em>-toast $toast[type] = (tips) => { return <em>Vue</em>.prototype. == 'undefined' && window.<em>Vue</em>) { window.<em>Vue</em>.use(Toast) }; export default Toast; <template> <div id
44720编辑于 2022-07-20来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-提取元素到内存
接着上一篇文章，我们已经实现了构建Vue实例的过程，接下来我们要实现的是提取元素到内存。
24511编辑于 2023-11-17来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-查找指令和模板
{ let {name, value} = attr; if (name.startsWith('v-')) { console.log('是Vue
37700编辑于 2023-11-17来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-界面驱动数据更新
经过上一篇文章，已经将数据驱动界面改变的过程实现了，本章节将实现界面驱动数据更新的过程。
526181编辑于 2023-11-17<script> let vue来自专栏『学习与分享之旅』【手写Vue】-手撕Vue-实现事件相关指令
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue基本模板</title> <script <input type="text" v-model="name"/>
我是div470101编辑于 2023-11-17 - 来自专栏『学习与分享之旅』
【手写Vue】-手撕Vue-数据驱动界面改变
) { this.cb(newValue, this.oldValue); } } } 上方的类中主要有三个属性，分别是vm, attr, cb，vm是Vue node.innerText = newValue; }); node.innerText = this.getValue(vm, value); }, 测试一下 v-html，打开浏览器控制台，输入 vue 测试一下 v-text，打开浏览器控制台，输入 vue.$data.text = '
我是测试v-text
'，可以看到界面上的内容已经改变了。 vm, value); }); return this.getValue(vm, args[1]); }); } 好了，我们来测试一下，打开浏览器控制台，输入 vue648191编辑于 2023-11-17 - 来自专栏神光的编程秘籍
手写 Vue3 响应式系统：实现 computed
这样，我们就实现了完善的 computed 功能，vue3 内部也是这样实现的。
68010编辑于 2022-11-11 - 来自专栏windliang的博客
从零手写Vue之虚拟dom
前边的6篇文章的文章介绍了虚拟 dom ，没看过的同学推荐直接到网站 vue.windliang.wang/ 看一下。 这篇文章主要是按照 Vue2 源码的目录格式和调用过程，把我们之前写的虚拟 dom 代码位置整理一下。 相比于 从零手写 Vue 之响应式系统，这次还新建了 code/VueLiang1/src/platforms/web 目录，将和 web 相关的操作都放到了该目录中，并且把 Vue 的入口文件换为平台相关的 这次的测试文件就已经非常有 Vue 那味儿了。 import Vue from ". https://github.com/wind-liang/vue2
32520编辑于 2022-09-23 - 来自专栏『学习与分享之旅』
【手写VueRouter】-手撕Vue-Router-知识储备
前言本文是手写Vue-Router的第一篇，主要是对Vue-Router的知识储备，为后面的手写做准备。那么 VueRouter 怎么实现呢？
414111编辑于 2023-11-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号