vue通信方式
- props
- 一般属性实现父子通过，函数属性实现子父通信，
- 缺点：隔代组件和兄弟组件通信麻烦
- vue自定义事件 $emit()
- 绑定监听：
<myComp @event='callback' - 触发事件：
this.$emit('event',data) - 缺点：只适合子父通信
- 绑定监听：
- 兄弟组件之间共享数据：EventBus
- $on 接收数据的那个组件
- $emit 发送数据的那个组件
- 消息订阅与发布 ：需要引入消息订阅与发布的实现库：如pubsub-js
- 订阅消息：PubSub.subscribe(‘msg’,(msg,data)=>{})
- 发布消息：PubSub.publish(‘msg’,data)
- 优点：可以实现任意关系组件间通信
- vuex：
- vuex是vue提供的集中式管理vue多组件共享状态数据的vue插件
- 优点：对组件间关系没有限制，且相比于pubsub库管理更加集中
vue中直接赋值给数组对象会更新视图吗？需要注意什么？
vue直接给对象数组赋值是不会触发视图更新的
注意：
- 对象数组直接修改属性，可以触发视图更新
- 删除对象或者数组中的 元素，需要通过key或者数组索引，可以触发视图更新
- 通过Vue.set可以设置对象或者数组的值，通过key或者数组索引，可以触发视图更新
- 数组赋值为新数组，可以触发视图更新
- 使用数组的变异方法，触发视图更新—（push()、pop()、shift()、unshift()、splice()、sort()）
vue中computer与watch区别
watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；
computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳；
计算属性computed :
支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：
\1. 不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
\4. 当一个属性发生变化时，需要执行对应的操作；一对多；
vuex
Vuex是实现组件全局状态管理的一种机制，可以方便实现组件之间数据共享
优点：1：能够在vuex中集中管理共享的数据，易于开发 2：能够高效实现组件之间数据共享 3：存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
-
state：存储状态（变量）,唯一的公共数据源，所有共享数据都要放到state中存储
-
组件访问state中数据的第一种方式：
//在使用vuex时，template中访问数据，this可以省略 this.$store.state.全局数据名称 -
组件访问State中数据的第二种方式：
//1.从vuex中按需导入mapState函数 import {mapState} from 'vuex' //2通过mapState函数，将当前组件需要的全局数据，映射为当前组件的计算属性 computed:{ ...mapState(['count'])//...展开运算符 }
-
-
getters：对数据获取之前的再次编译，是state的计算属性，不会修改原数据，store数据变化，getter的数据也会变化
getters:{ showNum:state => { return '当前最新数量是['+state.count+']' } } //第一种方式 this.$store.getters.name //第二种方式,在计算属性中 {{showNum}}//直接渲染 import {mapGetters} from 'vuex' computed: { ...mapGetters(['showNum']) } -
mutations：用于修该store中的数据，vuex中不允许组件直接修改数据，在这里的代码不能是异步的
-
只能通过mutation变更数据，不可以在组件中直接操作数据
-
虽然繁琐，但是可以集中监控所有数据的变化
//定义mutation const store = new Vuex.Store({ state: { count:0 }, mutations:{ add(state){//方法一 state.count++ } } }) //addN(state,step){state.count += step}方法一带参 step外界传过来的值 //触发mutation methods:{ handle(){ //触发的第一种方式 commit作用触发mutation this.$store.commit('add') //触发第一种方法的带参数 this.$store.commit('addN',3) } }//方式二 //1.从vuex中按需导入mapMutations函数 import {mapMutations} from 'vuex' //2.通过刚才的导入的mapMutations函数，将需要的mutation函数映射到当前组件的methods方法 methodsL{ ...mapMutation(['add','addN']), handle1() {//handle是绑定的点击事件 this.add() }, handle2(){ this.addN(3) } }
-
-
actions：处理异步操作
-
第一种触发，actions中不能直接调用state数据，需要通过commit触发某个mutation
//定义Action const store = new Vuex.Store({ mutations:{ add(state){state.count++} } }),//addN(state,step){state.count += step} actions: { addAsync(context){//addNAsync(context,step){setTimeout(()=>{context.commit('addN',step)},1000) }} setTimeout(()=>{context.commit('add')},1000) } } //触发Action methods:{ handle() { //第一种触发 display作用触发actions this.$store.dispatch('addAsync') } }//this.$store.dispatch('addAsync',5) -
第二种触发
//1.从vuex中按需导入mapActions函数 import {mapActions} from 'vuex' //2.将制定的actions函数，映射为当前组件的methods函数 methods:{ ...mapActions(['addAsync','addNAsync']) }
-
-
modules：模块化vuex，拥有自己的state,getters,mutations,modules,actions
//vuex index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
},
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
},
sub(state) {
state.count--
},
subN(state, step) {
state.count -= step
}
},
actions: {
addAsync(context) {
setTimeout(() => {
// commit作用触发mutation
context.commit('add')
}, 1000)
},
addNAsync(context, step) {
setTimeout(() => {
// commit作用触发mutation
context.commit('addN', step)
}, 1000)
},
subAsync(context) {
setTimeout(() => {
// commit作用触发mutation
context.commit('sub')
}, 1000)
}
},
modules: {}
})
//Subtraction.vue
<template>
<div>
<h3>当前最新的count值为： {{count}}</h3>
<button @click="sub">-1</button>
<button @click="subN(5)">-n</button>
<button @click="subAsync">-1async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
data() {
return {
}
},
computed: {
...mapState(['count'])
},
created() {
},
methods: {
...mapMutations(['sub', 'subN']),
...mapActions(['subAsync'])
// btn9() {
// this.sub()
// },
// btn8() {
// this.subN(5)
// },
// btn7() {
// this.subAsync()
// }
}
}
</script>
<style>
</style>
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
