江苏龙网

  1. 首页 > 人文 > >

【源码时代】用Vue和React构建相同应用程序，区别在哪？( 二 )


只要 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 事件 ， 如下所示：
只要用户按下了'enter'键 ， 这个函数就会触发 createNewToDoItem 函数 ， 如下所示：handleKeyPress = (e) => { if (e.key === ‘Enter’) { this.createNewToDoItem(); } };
Vue：
在 Vue 中 ， 要实现这个功能非常简单 。 我们只需要使用 @符号和事件监听器的类型 。 例如 ， 要添加 click 事件侦听器 ， 我们可以这样写：


推荐阅读


上一篇：【zol中关村在线】新iPad Pro发布 网友：文案走“阴阳怪气”风

下一篇：新浪科技：特斯拉宣布美国两工厂临时停产