江苏龙网

  1. 首页 > 资讯 > 科技 > >

「」用Vue和React构建相同应用程序，区别在哪？( 二 )


Vue：createNewToDoItem() {this.list.push({'todo': this.todo});this.todo = ''; }
React 是怎么做到的？
在 React 中 ， input 有一个叫作 value 的属性 。我们通过几个与创建双向绑定相关的函数来自动更新 value 。React 通过为 input 附加 onChange 函数来处理双向绑定 。
只要 input 的值发生变化 ， 就会执行 handleInput 函数 。这个函数会将状态对象中 todo 字段的值改为 input 中的值 。这个函数看起来像这样：handleInput = e => {this.setState({todo: e.target.value}); };
现在 ， 只要用户按下页面上的 + 按钮 ， createNewToDoItem 就会调用 this.setState ， 并传入一个函数 。这个函数有两个参数 ， 第一个是状态对象的 list 数组 ， 第二个是 todo（由 handleInput 函数更新） 。然后函数会返回一个新对象 ， 这个对象包含之前的整个 list ， 然后将 todo 添加到 list 的末尾 。
最后 ， 我们将 todo 设置为空字符串 ， 它也会自动更新 input 中的值 。
Vue 是怎么做到的？
在 Vue 中 ， input 有一个叫作 v-model 的属性 。我们可以用它来实现双向绑定 。
v-model 将 input 绑定到数据对象 toDoItem 的一个 key 上 。在加载页面时 ， 我们将 toDoItem 设置为空字符串 ， 比如 todo:’’ 。如果 todo 不为空 ， 例如 todo:’add some text here' ， 那么 input 就会显示这个字符串 。我们在 input 中输入的任何文本都会绑定到 todo 。这实际上就是双向绑定（input 可以更新数据对象 ， 数据对象也可以更新 input） 。
因此 ， 回看之前的 createNewToDoItem() 代码块 ， 我们将 todo 的内容放到 list 数组中 ， 然后将 todo 更新为空字符串 。
如何删除待办事项？
React：deleteItem = indexToDelete => {this.setState(({ list }) => ({list: list.filter((toDo, index) => index !== indexToDelete)})); };
React 是怎么做到的？
虽然 deleteItem 函数位于 ToDo.js 中 ， 我仍然可以在 ToDoItem.js 中引用它 ， 就是将 deleteItem() 函数作为的 prop 传入：
这样可以让子组件访问传入的函数 。我们还绑定了 this 和参数 key ， 传入的函数需要通过 key 来判断要删除哪个 ToDoItem 。在 ToDoItem 组件内部 ， 我们执行以下操作：
-
我使用 this.props.deleteItem 来引用父组件中的函数 。
Vue：this.$on(‘delete’, (event) => {this.list = this.list.filter(item => item.todo !== event) })
Vue 是怎么做到的？
Vue 的方式稍微有点不同 ， 我们基本上要做三件事 。
首先 ， 我们需要在元素上调用函数：
-
然后我们必须创建一个 emit 函数作为子组件内部的一个方法（在本例中为 ToDoItem.vue） ， 如下所示：deleteItem(todo) { this.$parent.$emit(‘delete’, todo) }
然后我们的父函数 ， 也就是 this.$on(’delete’) 事件监听器会在它被调用时触发过滤器函数 。
简单地说 ， React 中的子组件可以通过 this.props 访问父函数 ， 而在 Vue 中 ， 必须从子组件中向父组件发送事件 ， 然后父组件需要监听这些事件 ， 并在它被调用时执行函数 。
这里值得注意的是 ， 在 Vue 示例中 ， 我也可以直接将 $emit 部分的内容写在 @click 监听器中 ， 如下所示：
-
这样可以减少一些代码 ， 不过也取决于个人偏好 。
如何传递事件监听器？
React：
简单事件（如点击事件）的事件监听器很简单 。以下是我们为添加新待办事项的按钮创建 click 事件的示例：
+
非常简单 ， 看起来很像是使用纯 JS 处理内联的 onClick 事件 。而在 Vue 中 ， 需要花费更长的时间来设置事件监听器 。input 标签需要处理 onKeyPress 事件 ， 如下所示：


推荐阅读


上一篇：「」watchOS 7 新功能全面曝光 分享表盘、视距仪

下一篇：【】老司机揭秘，互联网离钱最近的流量操盘手都要求会些什么？