初识Vue

vue-loader 的作用

查看vue官方文档,发现组件注册一般都是这么写的

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

但是我们的实际项目中的代码都是这样的。

<template>
....
</template>
<script>
.....
</script>

原因就在于我们在实际项目中使用了 vue-loader, 它可以非常好的帮我们自动加载所有的内容,按照某种约定。vue-loader文档

vue组件和实例

这样可以创建一个vue实例。每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的:

var vm = new Vue({
  // 选项
})

可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器,这样可以创建一个vue实例。

image.png

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

全局组件

要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:

Vue.component('my-component', {
  // 选项
})

组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件:

<div id="example">
  <my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

也可以这样注册组件

var apple = Vue.extend({
   ....
})
Vue.component('apple',apple) 

这样相当于上面的一句Vue.component 。Vue.extend 返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 Vue 实例构造器。
Vue.component 是用来全局注册组件的方法,其作用是将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用类似于 new myVue 这样的构造函数来生成组件实例,并挂载到自定义元素上,当然实际情况要比这复杂得多。
vue.component

局部组件

不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

我们项目中的组件一般都是局部注册。该页面需要什么组件引入什么组件。

vuex

什么时候需要vuex?
他的意思其实就是如果开发的程序并不是很庞大,一个页面中的组件不是很多并且他们之间并不需要大量频繁的互相读写操作,那么就可以直接使用传统的Vue.js中的组件Prop或者事件触发来修改状态,或者用组件 - vue.js**#非父子组件通信 中介绍的new一个空的Vue对象实例,并且通过事件触发等方式来跨组件通信。如果中大型,尤其是有许多事件传播,那么vuex作用就体现出现了,为什么?ok,dispatch,on,这种传播,如果是单向的还好,向上,向下,但是如果非单向,那么必定是先传上去,在传下来,中间还要监听好各自事件别给我整乱了。。。试想一下,一个中大型项目,这里会发生什么?一个字乱,有的时候一个事件,对应的模块都要找半天

必须将所有 state 都维护在 Redux 中吗? 可以用 React 的 setState() 方法吗?

没有 “标准”。有些用户选择将所有数据都在 Redux 中维护,那么在任何时刻,应用都是完全有序及可控的。也有人将类似于“下拉菜单是否打开”的非关键或者 UI 状态,在组件内部维护。适合自己的才是最好的。

使用局部组件状态是更好的。作为一名开发者,应该决定使用何种 state 来组装你的应用,每个 state 的生存范围是什么。在两者之间做好平衡,然后就去做吧。
这么个应用场景

一个按钮,点击它的时候显示上面的文字,再点击它的时候不显示上面的文字。

redux是一个状态管理工具,使用它本来就是为了管理公共状态的。组件A发生的变化影响了组件BCD,那么使用它很方便。但是,如果组件A的变化只影响它本身(包括未来也不会影响其他组件),那么何不回到react,把这个状态直接存储到组件本身上呢?只需要一步,this.setState()

这里有一些将怎样的数据放入 Redux 的经验法则:

  • 应用的其他部分是否关心这个数据?
  • 是否需要根据需要在原始数据的基础上创建衍生数据?
  • 相同的数据是否被用作驱动多个组件?
  • 能否将状态恢复到特定时间点(在时光旅行调试的时候)?
  • 是否要缓存数据(比如:数据存在的情况下直接去使用它而不是重复去请求他)?
    组织state
    vuex实践
    vuex源码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容