vue3 ref reaction computed api练习

本文是练习 vue3 ref reaction computed
在此我们还用到了 setup
！！！！要注意 在setup中 this是不可以使用的
以下是通过ref的方法来进行完成
ref 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value
如果传入 ref 的是一个对象，将调用 reactive 方法进行深层响应转换。

<template>
  <div class="hello">
	  <input v-model="num1" @keyup="add()"/>
	  <span>+</span>
	  <input v-model="num2" @keyup="add()"/>
	  {{result}}
  </div>
</template>

<script>
// 在此先引入ref
import {ref} from 'vue';
export default {
  setup(){
	  const num1 = ref(0)//ref(这里可以传递 数组 json 数字 等等)
	  const num2 = ref(0)
	  const result = ref(0)
	  
	  function add(){
			result.value = parseInt(num1.value) +parseInt(num2.value)
		  }
	  // 暴露给模板
	  return {
		  num1,//在这里需要注意  在上面声明过的 变量 方法等 都需要return 出去
		  num2,
		  result,
		  add
	  }
  }
}
</script>

<style scoped lang="scss">

</style>

下面是使用vue3 中的reactive api进行书写
reaction 接收一个普通对象然后返回该普通对象的响应式代理

<template>
  <div class="hello">
	  <input v-model="state.num1" @keyup="add()"/> 
	  <span>+</span>
	  <input v-model="state.num2" @keyup="add()"/>
	  {{state.result}}
  </div>
</template>

<script>
// 在此先引入reactive
import {reactive} from 'vue';
export default {
  setup(){
	  // 在使用reactive 的变量时 必须使用state.变量  进行引用  这样写 我们把组件中的状态全部抽离出来了  我们完全可以把 state add 可以写到函数外面 或者写到setup外面也是可以使用的
	  const state = reactive({
		  num1:0,
		  num2:0,
		  result:0
	  })
	  
	  function add(){
			state.result= parseInt(state.num1) +parseInt(state.num2)
		  }
	  // 暴露给模板
	  return {
		  state,
		  add
	  }
  }
}
</script>
<style scoped lang="scss">

</style>

利用computed 来进行计算

<template>
  <div class="hello">
	  <input v-model="state.num1"/> 
	  <span>+</span>
	  <input v-model="state.num2"/>
	  {{state.result}}
  </div>
</template>

<script>
// 在此先引入reactive computed
import {reactive,computed} from 'vue';
export default {
  setup(){
	  const state = reactive({
		  num1:0,
		  num2:0,
		  // 在这里我们使用了 computed 我们就减少了一个事件绑定 和事件监听 的一个处理 
		  result:computed(()=> parseInt(state.num1) +parseInt(state.num2)),
		  
	  })
	  // 暴露给模板
	  return {
		  state,
	  }
  }
}
</script>
<style scoped lang="scss">

</style>