vue3.0
文章平均质量分 61
夜跑者
目前从事web前端,小程序开发。熟悉vue框架,uni-app跨端框架。
展开
-
vue3的新特性custom renderer
文章转自:https://blog.51cto.com/15077561/2594771默认的目标渲染平台 在vue3中允许用户自定义目标渲染平台,以往的版本中目标渲染被局限于浏览器dom平台,而现在可以把 vue 的开发模型扩展到其他平台。点击进入官网 Tips:以往解决把 vue 的开发模型扩展到其他平台(Canvas、iOS、Android等等)的方式之一是借助第三方工具例如WEEX(点击进入官网) 我们先来弄懂vue是如何定义默认的目标渲染平台的,也就是说如何将目标渲染转载 2021-02-25 14:00:05 · 5619 阅读 · 0 评论 -
Vue3.0 响应式系统(五)toRaw markRaw
这篇文章看看Vue3.0给我们提供的这两个方法,toRaw方法是把被reactive或readonly后的Proxy对象转换为原来的target对象,而markRaw则直接让target不能被reactive或readonly。先看看toRaw怎么用, setup(){ let obj = { msg: 'hello', student: { name: 'xiaoliu',原创 2021-02-15 21:18:05 · 2150 阅读 · 0 评论 -
Vue3.0 响应式系统(四) shallowReactive shallowReadonly
上一篇文章分析了reactive,readonly方法,这两种方法都是对target进行深度侦测(虽然是延迟侦测),Vue3.0还给我们提供了对target只进行第一层侦测,那就是shallowReactive,shallowReadonly方法。我们这篇文章看看这两个方法是怎么实现的。先看个例子:<html> <head> </head> <body> <div id="app"> <div&g原创 2021-02-15 07:45:25 · 1131 阅读 · 1 评论 -
Vue3.0 响应式系统(三) reactive readonly
从这篇文章起,我们看看Vue3.0的响应式部分源码。这部分reactive方法是核心,从这个方法看起,reactive方法如下:export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>export function reactive(target: object) { // if trying to observe a readonly proxy, return the read原创 2021-02-10 11:01:07 · 1356 阅读 · 0 评论 -
Vue3.0 响应式系统(二)
上一篇文章分析了用Proxy代理问题,用户需要自己对原始对象数据进行深度代理,这一篇文章看看还有没有其他问题。先看一个例子:<html> <head> <style type="text/css"></style> </head> <body> <script> let arr = [ { id: 1, msg: "ar原创 2021-02-09 16:14:16 · 105 阅读 · 0 评论 -
Vue3.0 响应式系统(一)
Vue3.0 对响应式系统模块进行重构,不再用Object.defineProperty了,而是改用Proxy。这样做大体上有两个好处,一是不用对数组进行单独处理了,去掉了Vue.set 和 Vue.delete接口,因为Proxy可以对整个对象进行拦截操作。二是对原始对象数据变为响应式对象数据时不再一次全部进行拦截操作了,而是在使用时才进行拦截操作,这样的话在组件初始化阶段就会带来性能提升。要看Vue 3.0的响应式系统,得先看看Proxy,Reflect这对基友。Proxy,Reflect详细用法请原创 2021-02-09 11:29:13 · 206 阅读 · 0 评论 -
Vue3.0 渲染流程(五)
到这来还没看到渲染出Hello Vue3.0出来。。。 我们接着看最后一件事:setupRenderEffect const setupRenderEffect: SetupRenderEffectFn = ( instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized ) => { // create reactive effect.原创 2021-01-30 15:30:33 · 618 阅读 · 1 评论 -
Vue3.0 渲染流程(四)
这一篇文章接着分析setupComponent(instance)过程,传给这个函数的参数是之前创建的instance。export function setupComponent( instance: ComponentInternalInstance, isSSR = false) { isInSSRComponentSetup = isSSR //从vnode中解构出props,children,shapeFlag const { props, children, sha原创 2021-01-30 14:26:25 · 1737 阅读 · 0 评论 -
Vue3.0 渲染流程(三)
上两篇文章分析了初次渲染大体流程,以及创建vnode过程,都比较简单,这篇文章分析具体渲染vnode的过程。这个render函数就是调用createAppAPI 传递过程的函数参数。在baseCreateRenderer 函数中能看到这一过程:function baseCreateRenderer( options: RendererOptions, createHydrationFns?: typeof createHydrationFunctions): any { //...原创 2021-01-30 12:12:57 · 711 阅读 · 0 评论 -
Vue3.0 渲染流程(二)
上一篇文章(https://blog.csdn.net/liubangbo/article/details/112792345)分析了渲染流程大体过程,这一篇文章分析一下创建VNode过程,以及渲染VNode过程。分析之前还是先贴一下我们那个最简单的例子:<html> <head> <style type="text/css"> </style> </head> <body> <原创 2021-01-27 08:45:15 · 1051 阅读 · 0 评论 -
Vue3.0 渲染流程(一)
我们先从一个最简单的例子来分析渲染流程:<html> <head> <style type="text/css"> </style> </head> <body> <div id="app"> <div>hello {{state.msg}}</div> </div> <script src="../dist原创 2021-01-19 08:31:09 · 1257 阅读 · 0 评论 -
Vue3.0 源代码编译调试
如果看Vue3.0源代码的话,最好是先搭建个单步跟踪调试环境,哪里有不清楚的地方可以在浏览器中单步跟踪一下。搭建源码调试环境步骤如下:1. 首先要从github 上下载源代码, 这就不多说了2. 在package.json 中"dev": "node scripts/dev.js --sourcemap", 加上 --sourcemap 参数,这样npm run dev 后编译出的源代码才可以调试 如果出现上图说明已经编译好了, 在vue-next/packages/v...原创 2021-01-12 19:10:47 · 1320 阅读 · 0 评论 -
Vue3.0 初体验
元旦假期抽空看了一下vue3.0,在B站上看的视频,感觉B站上号东西不少啊,以前从没有看过。尤大新开发了Vite,据说是再大的项目都是秒出,不用webpack打包了。所以特别适合在开发阶段用vite,如果开发电脑不好的话,用vite应该体验非常好。用vite来搭个scaffold 特别简单:npm init vite-app vite-hello 这么一行就OK了,连vite一块都安装了。体验一下vue3.0的setup, 哈哈<template> <p>...原创 2021-01-04 09:16:34 · 149 阅读 · 2 评论