vue中数据异步更新($nextTick)的问题

在vue中数据向视图上进行更新的操作，是异步的

异步的就意味着，在代码中更改完数据之后，直接去访问页面中的元素中的内容，还是老数据

那么如何去解决这个问题呢？

vue中提供了$nextTick方法：

<!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-UA-Compatible" content="ie=edge" /><title>Document</title></head><body><div id="app"><div id="box">{{ msg }}</div><button @click="btnChangeMsg">改数据</button></div><script src="./node_modules/vue/dist/vue.js"></script><script>const vm = new Vue({el: "#app",data: {msg: "Hello World"},methods: {btnChangeMsg() {// 在vue中数据向视图上进行更新的操作，是异步的this.msg = "Hello LYH";// 异步的就意味着，在代码中更改完数据之后，直接去访问页面中的元素中的内容，还是老数据// console.log(document.getElementById("box").innerHTML)；打印出来还是老数据// $nextTick回调函数，能够确保我们获取到的页面中的内容，都是最新的！this.$nextTick(function() {console.log("这个函数，会在Vue将数据更新到视图之后，执行");console.log(document.getElementById("box").innerHTML);});}}});</script></body>
</html>

vue中数据是在data里面还是在vue的实例里面？

我们是将数据放在参数对象中的data属性中传递给Vue构造函数的

Vue构造函数在接收到这个参数后

1. 会读取data属性中所有的数据，通过Object.defineProperty方法，将这些数据全部加到vue实例上

1.1 这样做，可以让属性有了set和get方法，可以实现双向绑定等等功能

1.2 这样做，可以让程序员直接通过this来访问数据，方便使用

2. Vue还会读取所有methods中的函数，把所有的函数，全部加给vue实例

可以直接通过this来访问这些函数

vue中数据异步更新($nextTick)的问题相关推荐

如何理解vue中同步异步
如何理解vue中同步异步同步异步 , 举个例子来说,一家餐厅吧来了5个客人,同步的意思就是说,来第一个点菜,点了个鱼,好, 厨师去捉鱼杀鱼,过了半小时鱼好了给第一位客人,开始下位一位客人,就这样一 ...
vue中数据劫持代理
1.vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名,而不用写成this.data.属性名 2.实现原理主要就是用到了Object.definePro ...
关于vue中next和Tick(nextTick)的一点理解
前言在这之前我是没有怎么看过vue源码的,但是看了源码后又产生了一些疑问,如果不看源码我还真没有任何疑问的去用nextTick,因为我只知道我想获取更新后的dom我就在里面写回调,只管写准没错,有天 ...
Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
vue 中实现异步加载模块
前提:使用vue官方脚手架搭建(webpack) 使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,这样打包使单页面的应用的体积比 ...
视图之二--视图中数据的更新
视图不是表,视图里面的数据是通过sql语句去表中查询得到的.当表中的数据发送更改之后,视图里的数据也会发生相应的更改.所以我么一般有两种方式更新视图里面的数据:一是更新表中的数据,从而间接地更新视图中 ...
vue中数据之间的传递用propos
子集父集以上是子父集互相传递数据. 传参数的时候是以对象的形式展示的,封装在propos中的. 如果默认值是string或者number类型,那么可以用default表示. 如果默认值是objec ...
vue中this.$nextTick()使用解析
原理 vue中数据和dom渲染由于是异步的,所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中. this.$nextTick 作用是可以将回调延迟到下次DO ...
Vue学习：Vue中的数据代理
一.回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数: 1.属性所在的对象: 2.属性的名字: 3.一个描述 ...

vue中数据异步更新($nextTick)的问题

vue中数据异步更新($nextTick)的问题相关推荐

最新文章

热门文章