分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

vue.js实现初了解(一)

发布时间:2023-09-06 02:26责任编辑:顾先生关键词:js

1. vue 2.0是用Flow做静态类型检查, 3.0对TypeScript的支持更好了;

2. vue.js是基于Rollup(更轻量,适合js库的构建)构建的,它的构建相关配置都在scripts目录下;

3. Runtime Only 版本(template模板编译为render函数) 和 Runtime+Compiler 版本;

4. vue实际是一个函数,利用函数来实现类,类上挂了很多的原型方法($set,$route等是原型方法),全局方法Vue上挂载一些静态方法,全局use,mixin,extend,assgtRegisters(components等)这些方法是静态方法/属性。

数据驱动  数据变化来驱动视图变化

5. new Vue发生了什么?

Vue方法源码片段

function Vue(options){ ?// 传入options配置项 ??if(process.env.NODE_ENV!==‘production‘&&!(this instanceof Vue)) ??{ ???warn(‘vue is a constructor and shou be called with `new` keyword‘) ??} ????this._init(options) // 调用初始化方法}

new关键字在js中代表实例化一个对象,而Vue实际上是一个类,类在js中是用Function来实现的,初始化会调用this._init方法。

Vue初始化主要干了几件事,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化data、props、computed、whatcher等等,在初始化的最后,如果有el属性,则调用vm.$mount方法挂载vm,挂载的目标就是把模板渲染成最终的DOM。

6. 手写render函数

import Vue from ‘vue‘var app = new Vue({el:‘#app‘,render(createElement){ ???return createElement(‘div‘, { ??????attrs: { ????????id:‘#app‘ ??????} ???}, this.message)},data(){ ???return { ?????message: ‘Hello World~‘ ??}} ???})

7. Virturl DOM

是用一个原生的js对象去描述一个DOM节点,所以它比创建一个dom的代价小很多。在vue.js中,virtual DOM是用vNode这么一个Class去描述,它是定义在src/core/vdom/vnode.js中。

8. createElement 利用 createElement 创建vNode

vue.js实现初了解(一)

原文地址:https://www.cnblogs.com/leiting/p/10116778.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved