vue
文章平均质量分 92
qq_35534823
这个作者很懒,什么都没留下…
展开
-
Vue中状态管理——Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。在vuex出现之前,vue里面的状态是属于‘单向数据流’。举个官网的例子:new Vue({ // state data () { return { count: 0 } }, // view template:原创 2017-05-05 02:13:41 · 19721 阅读 · 0 评论 -
Vue源码窥探之依赖收集
我们之前了解到,Vue 的响应式对象过程,是对 props 和 data 依次执行 defineReactive 方法,那我们这里继续重温一下该方法的逻辑实现:defineReactive 方法内我们需要关注两点,一个是在开始先实例化一个 Dep ,另一个是 get 方法内部的一系列逻辑就是依赖收集的过程,最关键的是 dep.depend 。那说明整个依赖收集的过程都是和 Dep 息息相关的,...原创 2019-09-24 10:53:46 · 331 阅读 · 0 评论 -
Vue源码窥探之响应式对象
在 Vue 初始化阶段的时候,会执行 _init 方法,其中在 _init 方法中会执行 initState 方法。在 initState 方法中,我们会对 props ,methods ,data,computed,watch 进行初始化。在我们这篇文章中,主要分析的是 Vue 的数据的响应式,所以我们着重分析 props 和 data 。首先,我们来看一下 initProps 过程。i...原创 2019-09-20 15:35:40 · 333 阅读 · 0 评论 -
Vue源码窥探之new Vue之后发生了什么?
为了完整的了解整个机制,我们最好选择客户端 compile 的版本,也即 Runtime + Compiler 。在我们使用 Vue-Cli 初始化一个 Vue 项目的时候,会询问我们使用 Runtime Only 版本还是 Runtime + Compiler 版本。Runtime Only使用该版本时,我们需要借助 webpack 的 vue-loader 工具来把 .vue 文件编译...原创 2019-09-17 18:09:10 · 510 阅读 · 0 评论 -
Vue源码窥探之 computed
让我们先从一些面试题来窥探 computed 吧。computed和 watch 的区别 ?computed 是自动监听依赖值的变化,可以监听多个依赖值,从而动态返回内容。watch 是监听一个值或一个对象,然后当依赖发生变化的时候,可以执行回调函数或者异步操作等。通常来说仅仅是需要动态值就使用 computed ,如果需要在值改变后执行一些业务逻辑,就使用 watch。com...原创 2019-03-12 15:27:54 · 705 阅读 · 0 评论 -
Vue源码窥探之 watch
watch 的初始化是在 stateMixin 中进行的,在 instance/state 中export function initState (vm: Component) { ... if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) }}然后看一下 i...原创 2019-03-20 16:42:24 · 372 阅读 · 0 评论 -
Vue源码窥探之 nextTick 机制
MicroTask(微任务) 和 MacroTask(宏任务)在说 nextTick 之前,需要对 microTask , macroTask 和 Event Loop 有一定了解。详见JavaScript的运行机制Event Loop(事件循环), microTask 是把任务放在主线程的末尾,而 macroTask 是把任务放在 Task Queue 中,所以当我们执行完主线程的代码后,会先...原创 2019-03-11 15:01:45 · 480 阅读 · 0 评论 -
Nuxt.js 使用教程指北
Nuxt .js 是脱胎与 React 中的 SSR 方案 Next.js 的,基本使用方法都类似。1,破剑式:安装:yarn create nuxt-app <项目名>需要注意的是,这类 SSR 框架推崇约定大于配置,所以生成的项目目录结构是不能修改的,不过其实这个结构和我们平常使用的 Vue-cli 生成的目录结构是差不多的。2,破刀式:配置:Nuxt.js 默认...原创 2019-03-07 17:32:31 · 1951 阅读 · 1 评论 -
创天下项目总结
路由模块1, router这块只是单纯使用了的框架推荐的异步加载组件,并没有深入研究webpack的懒加载原理。 2, 在 /my 组件的设计上存在瑕疵,之前总是怀疑自己的用法错误,直到接触了React之后,才明白嵌套路由中的子路由是和父路由一起展示的。那说明用法是没有错。只是设计上有待商榷,像在做/my 和其他嵌套路由这种模块的时候,因为有时候父路由的高度会比子路由高,这就导致无法对父路由...原创 2018-02-25 17:12:09 · 285 阅读 · 0 评论 -
TP5 + Vue.js 分页效果
在后端采用ThinkPHP5框架做数据查询。protected $hidden = [ 'img_id'];public function img(){ return $this->belongsTo('Image', 'img_id', 'id');}public static function getPage($page){ $result = self::with(原创 2017-08-25 22:35:47 · 4554 阅读 · 0 评论 -
Vue源码窥探之依赖收集
派发更新主要是在我们修改响应式数据的时候可以得到通知。当修改响应式对象地数据时,会触发 setter ,里面有两个关键点,一个是 childOb = !shallow && observe(newVal),如果 shallow 为 false 的情况下,会对新设置的值变成响应式对象;另一个是 dep.notify(),通知所有订阅者。class Dep { // ......原创 2019-09-24 17:45:25 · 335 阅读 · 1 评论