vue获取使用$refs获取自组件方法和属性注意问题

ref可以绑定dom节点或字组件，用于获取子组件的方法和属性。但是只有组件 完成渲染 时，才可以获取得到，且$refs也不是响应式的！

响应式处理可以包括以下几种方法：也就是说，在子组件完成渲染以后，动态修改的data或method，在父组件都可以实时获取。

（1）使用nexttick（）；子组件 同步 更改数据可反映到父组件上，nexttick属于微任务，也就是说，在本轮事件循环完成之前，可以执行异步 *** 作，从而保证实时性。

（2）如果子组件数据更新是异步，比如说从接口请求回来的这种，使用nexttick，甚至settimeout(()=>{},0) 都无法读取到已经修改的data，因为在消息队列里面，异步任务作为宏任务始终排在队尾。常发生的情况是，接口请求的数据还没到，父组件中已经读取了refs[componets]xxx的数据，这会导致这个数据打印出来是undefined。

解决办法是：

>>>settimeout(100ms）的等待，这种方法虽然可以解决，但是非常不好，原因是你无法控制接口要多少秒才能到达响应结果

打印结果：

由此可见 settimeout 0 会在接口响应前执行。

>>> 使用回调的方式。接口响应完，在then里，通过$emit触发父组件获取refs的方法。这种回调必然可以保证数据已经set到，再次手动获取，即可得到响应值。

（3）以上分别用于解决子组件同步和异步的问题，但如果子组件使用v-if（资料发现v-for同样会有这种问题），子组件未被渲染，同样会出现$refs无法读取的问题。暴力解决法是，v-if换成v-show。区别在于：v-show不会发生重拍，只是display：none。这种方式虽然可以保证 $refs获取到子组件的数据，但在某些特定的业务场景下（比如子组件请求必须在父组件完成某 *** 作的时候进行），会导致一些逻辑错误。因此合理的解决办法是，用（2）中回调的方法。

其他解决办法待更新

1vuex的优缺点

2vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this$storecommit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutationsjs文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1js

mod2js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3vuex的注意点

a在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b使用vuex我们在组件内更改数据是无效的。例如：this$storestatename=‘小明‘，这么做会报错。

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏

而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

多个组件共享数据或者是跨组件传递数据时

然后在组件中就可以通过this$store访问到vuex了

state作为唯一的数据源，所有的共享数据都存放在state中，如：

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。

在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象

（1）触发mutation的方法

这次是在组件的methods中，将mutation映射成methods的方法

（2）mutation传值（官网将传递的值称为载荷）

对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

还可以写成一种对象的方式

mapMutations传值

（3）注意

actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步 *** 作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this$storedispatch('方法名')

比如定义一个定时器异步的使count自增

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

组件中访问getters中的属性

其实和state差不多，就不多说了

下一节：vuex模块化

Vue3获取当前组件实例的 getCurrentInstance 方法上 ctx 生产获取不到 上面的全局方法

其实这个 ctx 就是为了便于在开发模式下通过控制台检查的，生产环境，无法获取全局上挂载的方法。不要依赖 ctx 方法去获取组件实例来完成一些主要功能，否则在项目打包后会报错。

解决办法是用proxy代替ctx

不会。vuex中watch的使用，在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex，是store模块文件写相关的数据信息。vuex是一个专门为vue，js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在组件直接使用

总结

~

~

~

非组件中获取通过this$store数据名

~

~

vuex使用方式：

方式1

1、 创建容器实例store

2 、容器的状态state里写数据(驱动视图更新的数据)

3、 computed如同 methods，用来 修改 state数据状态的

1、mapState 辅助函数

正确做法：通过mutation修改数据状态

注意-注意-注意：mutation 中不能只能修改 state里的数据

如果需要执行异步 *** 作修改 state状态，则：使用 action

1、 在 action 中做两件事儿：1 执行异步 2 提交mutation修改容器状态

2、 注意：不要在 action 中直接修改容器状态，无法被调试工具观测记录到

3、 因为调试工具只能记录 mutation 的历史改变

1、filter过滤，过滤这个计算属性的数据

步骤：

1、安装、搭建脚手架

线上创建一个仓库(空的)

git status 查看状态

git remote add origin 复制地址

git push -u origin li

1、删除app

- Appvue 、定义出口#app、写路由出口、样式设置局部样式 完成

2、新建router文件、复制 完成

3、新建store文件、复制 完成

4、views两个vue组件删除 完成

5、新建文件、、、dir 、fileter、样式、utils、创建\ 看 文档结果

6、重启服务看下有没有报错(页面)、提交git--调整目录结构

6、vant(杭州有赞开发的)--导入vant

以上就是关于vue获取使用$refs获取自组件方法和属性注意问题全部的内容，包括:vue获取使用$refs获取自组件方法和属性注意问题、浅谈vue项目进阶开发-vuex篇、vuex基础总结等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！