Vue.js 一问一答

Posted 2020-11-24 zhangguicheng

Vue.js 一问一答

记录一下在学习 Vue 过程中给自己问的一些问题，持续更新中...

1. Vue.js 的核心是什么？

   官网：Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

   以下面的例子来说明：

   // Vue 中的模板语法
   <div id="app">
     {{message}}
   </div>
   
   var app = new Vue({
     el: "#app",
     data: {
       message: "hello Vue"
     }
   })

   上面的例子中上面的 div 是 Vue 中的模板写法，通过模板语法将数据 message 渲染进了 DOM 中。

2. 计算属性和计算方法有什么区别？

   计算属性有缓存机制，只有和它相关的属性改变时才会重新渲染，而计算方法则是只要属性变化就会改变。

   例： 全名 FullName 用计算属性和计算方法都可以实现，当用计算属性时，只要当名或姓改时才会重新渲染，而当用计算方法时，就算是改变年龄也会重新渲染。

   在这一点上，计算方法是优于计算属性的。

3. 如何做到数组变化的时候页面跟着变化?

   • 使用 数组方法：push, pop, shift, unshift, splice, sort, reverse.

   • 改变数组的引用，比如给这个数组重新赋予一个新的数组。

   • 利用 set 方法修改数组的值，例如:

     Vue.set(vm.list, 1, 5) // 将 list 数组索引为1的项改为5
     // 或
     vm.$set(vm.list, 1, 5)

4. 如何做到对象变化时页面跟着变化?

   • 如果是对象中已有的属性，那么改变这个属性的值页面就会跟着变化。

   • 如果往对象里面添加属性，那么页面不会跟着变化，想让其变变化可以改变对象的引用，比如给这个对象重新赋予一个新的对象。

   • 通过 set 方法给对象设置属性，页面也会跟着变化。例如：

     Vue.set(vm.userInfo, 'sala', 'secret')
     // 或
     vm.$set(vm.userInfo, 'sala', 'secret')

5. 想要在 tbody, select, ul, ol 等元素中使用 VUe 组件应该怎么实现？

   由于它们的特殊性，直接将组件写在这些元素中，会发现组件虽然在页面上显示，但是它们并不包裹在这些标签之中。

   解决方法： 使用 is

   // 假设 row 是一个组件，想要作为 tbody 的子元素
   <table>
     <tbody>
       <tr is='row'></tr>
       <tr is='row'></tr> 
     </tbody>
   </table>

6. 说一下当点击子组件时子组件中的 number + 1，如何实现同时父组件中的 counter 也跟着 + 1 ？

   • 在子组件中定义事件处理函数，事件处理函数的内容：
     • 当点击子组件时实现子组件的 number + 1
     • 触发一个新的事件

   • 父组件捕获这个事件，父组件事件处理函数的内容是将子组件的number赋给父组件中的 counter。

   • 在父组件中如何获得子组件的number属性呢？

     可以在使用子组件时设置 ref 属性，这样在父组件的事件处理函数中就可以获得子组件中的数据了。

7. 父子组件如何传值？

   • 父组件如何向子组件中传值？

     • 使用子组件时设置属性的方式

       <父组件>
         // 这样写时传给子组件的是一个字符串 "1"
         <子组件 count="1"></子组件> 
         // 这样写时传给子组件的是数字1，因为这样写双引号后面的内容是一个JS表达式
         <子组件 :count="1"></子组件> 
       </父组件>

   • 子组件如何向父组件传值？

     • 通过事件触发的方式

     在子组件中通过 this.$emit(‘触发的事件名‘， 向父组件传入的参数) 方式，触发一个事件，在使用子组件的地方捕获到这个事件，然后触发写在父组件事件处理函数。父组件的事件处理函数可以接受到从子组件传递过来的数据。

     当然也可以通过问题 6 中 ref 方式向父组件中传值，但是无论哪种方式都需要采用事件触发的方式。

   • 何为单向数据流，为什么要规定单向数据流？

     • 单向数据流指的就是子组件不能修改从父组件传递过来的数据。
     • 如果从父组件传递过来的数据是一个引用类型的话，在子组件中如果将其改变之后，那么父组件传递给其它组件时也将是修改之后的数据。