Vue2学习Vue3问个逻辑问题

[RyanFan666]

想问个问题，按照vue3的设计方法，先定义参数，再定义方法，那么我定义了个a参数，底下是a参数对应的1方法，那么我如果在2方法里要改变a参数，我是再调用a参数还是新建个b参数，因为vue2是直接都定义在data里面的，所以不管在哪个方法里都可以修改，那么现在我是修改a参数还是新建b参数呢，这不是背离了组合式api的初衷吗，就是一块一块的，那比如我方法2要用a参数，我不是还得往上翻这个参数叫什么嘛，那不还是跟vue2的data一样，然后vue3好像还有一个就是定义在后面的东西前面的方法不能调用

[s3xysteak]

因为vue2是直接都定义在data里面的，所以不管在哪个方法里都可以修改

这只是原生js的值传递问题，在vue3里你也一样哪里都能改

const data = ref(0)

function plus() {
  data.value ++
}
function minus() {
  data.value --
}

这不是背离了组合式api的初衷吗，就是一块一块的

组合式api更强调逻辑而不是数据，在你的思路中以数据（a参数）为核心，但实际上组合式api的优点是逻辑集中。比如你有两处不同的逻辑都需要用到同一个响应式变量，内部可能还涉及生命周期，数据监听等等：

const data = ref(0)

useDataA(data) 
useDataB(data)

function useDataA(data) {
  watch(data, val => {/* */})
  onMounted(() => {/* */})
}
function useDataB(data) {/* */}

选项式api中实现上述就会出现“东一块西一块”的情况，同一部分逻辑，需要你在各种生命周期、watch、data、method、computed等等之间到处跑

然后vue3好像还有一个就是定义在后面的东西前面的方法不能调用

不太理解这个是什么意思，你可能说的是原生js中的变量顺序问题：

useDataA(data) // ! error
const data = ref(0)

这在原生js中就是错误的，此时data尚未声明，你不能使用一个尚未声明的变量

[RyanFan666]

感谢！！！！