Vue3 定义非响应式数据

在 Vue3.0 中，使用 ref 或 reacitve 定义的数据更改后会触发页面自动更新。 如果我们不希望页面随着某个数据的变化自动更新，或者某个数据只是用来计算不展示到页面上，没必要为它建立响应式追踪，即定义一个非响应式数据，我们该如何做到？

实现代码：

                    import { ref } from 'vue'
                    
                    export default {
                        setup() {
                            const data1 = ref(0); //响应式
                            let data2 = 0; //非响应式
                        
                            return {
                                data1,
                                data2
                            }
                        },
                    }
                

此时 data2 就是一个非响应式的数据，看到这是不是非常简单，其实就和平时定义变量一摸一样。

你也不需要担心它是否会多次执行或导致变量被重置什么的， 因为 setup() 在Vue3的生命周期中只会被执行一次， 之后在生命周期的其他地方使用该变量时，用的也会是当前定义的这个变量。

最后

如果你看到了这篇文章，说明你可能跟我一样，把Vue3想复杂了。

...