vue响应式原理探究?

Question

vue响应式原理探究?
test.vue

<template>
    <div>
        <!-- <li v-for="item in 10">{{i = i+1}}</li> -->
        <li>test{{i = i+1}}</li>
        <li>test{{i = i+1}}</li>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                a:5,
                b:[1,2,3,4,5,6,7],
                i:0
            }
        },
        methods:{

        },
        watch:{
            i(now,next){
                console.log(now,next)
            }
        },
        mounted(){

        }
    }
</script>

<style scoped lang="scss">
    
</style>

浏览器中结果是这样子的!

求解:为什么是test203 test204 而不是test1 test2?中间改变了那么多次是什么时候改变的?

Answer 1

你在{{}}里放了表达式 每次页面渲染的时候都会执行一遍啊
就相当于你在一个Interval里写了i++

Answer 2

• 不懂你为什么要是 {{ i = i+1 }}
• 渲染第 2 个 li 的时候，i = i + 1, 你改变 i 的属性值，由于响应式，这时候会回头渲染第一个 li , 然后又是一个 i = i + 1, 由于值又变化了，这时候会再渲染第二个 li， 周而复始，死循环了。
• 为什么会停在 203 和 204 ，这得看源码了，在 vue.js 里面，行数图片上有，版本号 2.4.2

Answer 3

我也不是非常理解（包括看了文档）。你可以看看官方文档中的这部分，可能会有帮助：https://cn.vuejs.org/v2/guide...如何追踪变化