Vue
关注
分享
扫一扫
文章平均质量分 84
newway007
这个作者很懒，什么都没留下…
展开
-
vue3 源码之内置组件
teleport组件有一种场景是组件的一部分逻辑上属于该组件，但是需要显示在其它地方，类似于react的portals；一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位 CSS 是一个很大的问题，它非常容易受到外层父组件的 CSS 影响。把该组件渲染的这部分 DOM 挂载到 body 下面，这样就不会受到父级样式的影响了。而 Vue.js 3.0 把这一能力内置到内核中，提供了一个内置组件 Teleport，它可以轻松.原创 2021-04-23 22:24:39 · 1032 阅读 · 0 评论 -
vue3 源码之生命周期钩子
生命周期钩子对应的生命周期Option如下:beforeCreate -> 使用 setup() created -> 使用 use setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy-> onBeforeUnmount destroyed ->原创 2021-04-23 16:34:15 · 771 阅读 · 0 评论 -
vue3源码之 组合式api
vue3 提供了setupAPI来提供组合式API的使用. 我们开回顾一下vnode的挂载过程:const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => { // 创建组件实例 const instance = (initialVNode.component = createComponentInstance(initialV原创 2021-04-22 21:31:45 · 558 阅读 · 0 评论 -
vue3响应式原理附
上面讲了的N多源码。。其实只讲了怎么实现的，没有讲为什么要这么实现。vue3为什么会采用不同的响应式原理：这是因为vue2使用的Object.defineProperty存在一些问题：1.为什么vue2.x不支持使用数组下标来响应数据变化，只能用$set？事实上，Object.defineProperty 本身是可以监控到数组下标的变化的，只是在 Vue 的实现中，从性能 / 体验的性价比考虑，放弃了这个特性。 下面是栗子：function defineReactive(data, k原创 2021-04-22 19:37:26 · 460 阅读 · 0 评论 -
vue3源码之响应式原理
reactive的函数实现如下:function reactive (target) { // 如果尝试把一个 readonly proxy 变成响应式，直接返回这个 readonly proxy if (target && target.__v_isReadonly) { return target } return createReactiveObject(target, false, mutableHandlers, mutableColl原创 2021-04-22 16:24:06 · 272 阅读 · 0 评论 -
vue3源码之diff以及最长递增子序列详解（多种方法）
终于来到了我最想写的diff了。当时看这一块代码看了好久。然后顺带get了最长上升子序列算法和vue3源码中做的优化。新子节点数组相对于旧子节点数组的变化, 无非是通过更新, 删除, 添加和移动节点来完成的.新旧子节点数组很容易拥有相同的头尾节点. 对于相同的节点, 我们只需要对比更新即可.1.同步头部节点const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSus..原创 2021-04-21 19:00:54 · 1811 阅读 · 0 评论 -
vue3源码之渲染和更新流程
1.创建虚拟dom在createAppAPI的mount方法中, 通过createVNode创建了VNode:export function createAppAPI<HostElement>( render: RootRenderFunction, hydrate?: RootHydrateFunction): CreateAppFunction<HostElement> { return function createApp(rootComponent,原创 2021-04-20 20:46:17 · 605 阅读 · 0 评论 -
vue3源码阅读-createApp
CreateApp 作为 vue 的启动函数，返回一个应用实例一个实例：const HelloVueApp = { data() { return { message: 'Hello Vue!' } }}Vue.createApp(HelloVueApp).mount('#hello-vue')export const createApp = ((...args) => { const app = ensureRenderer()..原创 2021-03-28 19:57:07 · 1563 阅读 · 0 评论 -
vuex4的使用
import{createStore}from'vuex'exportdefaultcreateStore({state:{count:0},getters:{doubleCount:state=>state.count*2},mutations:{addCount(state,payload=1){state.count+=payload;}},act...原创 2020-12-23 21:13:50 · 2282 阅读 · 0 评论 -
vue 的jsx语法
<script> const grids = new Array(8).fill(1).map((_, r) => { return new Array(8).fill(1).map((_, c) => { return { key: `key-${r * 8 + c}`, ok: false }; }); }); export default { name: "app", data.原创 2020-12-14 21:14:07 · 348 阅读 · 0 评论 -
http-server和nginx启动vue-cli打包后的文件
最近被mode:'history'弄得有点头大。在history模式下打包出来的文件需要开启服务器才能正常运行。直接打开index.html文件路由访问的路径是根路径之类的。所以会路由跳转会出现一片空白。开启服务器之后，就可以正常访问跳转了。具体代码见我的githubHttp-server接下来详细说说vue-cli的配置以及如何打开页面。如果是想把文件放在根目录...原创 2020-01-04 11:38:06 · 1015 阅读 · 0 评论 -
element-ui中动态修改组件属性的值
最近在联系router中的history，顺便熟悉一下element ui，针对动态修改属性的值，做一下笔记。想要点击更换button的type类型。最初的想法是使用ref获取该dom：<el-button ref="button11" size="mini" @click="choose_card1">a</el-button><el-butto...原创 2019-12-31 16:19:33 · 9621 阅读 · 2 评论 -
vue之自定义插件
rulesPlugin.jsconst RulesPlugin = { install (Vue) { Vue.mixin({ created() { const rules = this.$options.rules if (rules) { Object.keys(rules).forEach(key =>...原创 2019-12-29 19:18:03 · 229 阅读 · 1 评论 -
$attr $listener
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-12-29 18:57:33 · 597 阅读 · 0 评论 -
中央事件总线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-29 18:32:20 · 213 阅读 · 0 评论 -
provide和inject传递数据
provide定义在任意父组件，inject定义在需要获取数据的子组件。离子组件最近的那个provide提供的数据优先级更高：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2019-12-29 18:21:51 · 1289 阅读 · 0 评论 -
vue-router的用法
vue-router使用方法和路由分类vue-router是vue的一个插件。因此，在router/index.js下面需要引入并注入vue中；import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'Vue.use(Router)export defaul...原创 2019-12-25 17:58:20 · 447 阅读 · 0 评论 -
vuex以及它的5个辅助函数
vuex是vue的一个插件，是vue的状态管理库，既然是vue的插件，那么就需要注册：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)除了注册，还需要给我们的vue的store赋值：store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.us...原创 2019-12-24 20:37:26 · 246 阅读 · 0 评论 -
vue之生命周期
所有的钩子函数不能使用箭头函数，如：created: () => console.log(this.a)因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，会导致 Uncaught TypeError: Cannot read property of undefinedbeforeCreate实例创建前的状态，el与data都为undef...原创 2019-12-13 21:42:56 · 125 阅读 · 0 评论 -
动态组件和异步组件
动态组件异步组件：原创 2019-12-13 15:56:22 · 85 阅读 · 0 评论 -
vue单文件组件和自定义组件
由于.vue文件需要转换成.js文件才能被浏览器识别，所以，使用webpack打包来转化成.js文件首先安装转换es6语法和处理vue文件的插件。package.json如下：{ "name": "vuewww", "version": "1.0.0", "description": "", "main": "index.js", "scripts":...原创 2019-12-13 15:33:23 · 659 阅读 · 0 评论 -
vue之组件
全局组件这样就可以挂载在页面上了，注意事项：template必须是一个dom结构，需要被标签包含，否则Component template requires a root element, rather than just text.局部组件slot组件作用域插槽作用域插槽使用的情形是，数据在子组件子内，父组件提供样式，方法等，...原创 2019-12-13 09:39:41 · 94 阅读 · 0 评论 -
vue computed、methods和watch
这是一个老生常谈的话题了。做一个总结吧。computed：对于计算属性computed的变量，不能命名为data已经命名过的变量，否则会报错：The computed property "val" is already defined in data.computed的getter和setterwatchnew Vue({ el: '#root...原创 2019-12-12 17:53:58 · 852 阅读 · 0 评论 -
VuePress从零开始搭建博客
花了2天多的时间总算搭出一个博客的雏形了。 搭建的博客没有使用官方提供的主题，而是自己创建了一个主题。所以，在样式上，有自己的风格和特点。转入正题。# 环境搭建安装VuePressyarn global add vuepress 或者：npm install -g vuepress也可以直接下载我的代码。然后cnpm i 下载依赖 https://github.com/ne...原创 2019-12-11 09:41:25 · 614 阅读 · 0 评论 -
vue基础之模板语法、指令
歪题我觉得我学react之后，整个人有点不好了，学react过程中Vue是怎么写来着？现在重温Vue，react是怎么写来着？模板语法<span>Message: {{ msg }}</span> <span v-html="rawHtml"></span></p>{{ number + 1 }} {{ ok ...原创 2019-12-03 21:17:17 · 135 阅读 · 0 评论