vue面试题

转载自：https://www.jianshu.com/p/0cdf51904afb

• 计算属性如何使用
  

一般我们在写vue的时候，在模板内写的表达式非常便利，它运用于简单的运算，但是他也有一些复杂的逻辑，包括运算、函数调用等，那么就用到了计算属性，他依赖于data中数据变化的  data 中数据变化的时候    计算属性就会重新执行，视图也会更新。

• 计算属性的 set  get 如何使用
  

每一个计算属性都包含一个getter 和一个setter ；
绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。
但在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，

• watch 如何使用
  

之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后，登录按钮才可以点击。
在没有使用vue之前，我们可能是通过input的change事件来判断，用户是否输入了内容，然后修改按钮的状态。现在有了vue，就省事了很多，我们只需要在watch中，监听数据模型的值改变即可。
在input 上绑定一个v-mode="pass"绑定一个数据名， 在data里写入绑定的事件名，通过watch来监听输入内容的改变，但是如果，监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep：true.也叫深度监听  
<input v-model="passw2" placeholder="请再次输入密码" />

• 计算属性和watch的区别
  

在我们运用vue的时候一定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。
就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，
而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

• prop 验证，和默认值
  

我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告
比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。

• prop 如何传一个对象的所有属性
  

方法一：使用不带参数的v-bind写法
v-bind中没有参数，而组件中的props需要声明对象的每个属性
方法二：使用带参数的v-bind写法
v-bind后跟随参数todo，组件中的props需要声明该参数，也就是v-bind后跟随参数todo，
组件就可以通过todo来访问对象的属性

• 插槽，具名插槽，插槽默认内容
  

单个插槽；在父组件写一个标签，在子组件通过slot来接受标签里的内容,他只能用一个slot。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。
具名插槽：在父组件标签写入slot，子组件里面写name名字，他们两个名字要相对应，才能通过名字在找到对应的位置。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

• 作用域插槽
  

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，子组件与父组件的数据动态交互的一种常见案例
父组件中必须要有template元素，且必须有scope特性，scope特性中是临时变量名，
接收从子组件中传递上来的属性，属性可以是任意定义的。

• 动态组件
  

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。
我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。如果要把组件切换过程中的将状态保留在内存中，可以添加一个 keep-  alive 指令参数，防止重复渲染DOM。
动态组件上使用keep-alive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

• 11子组件访问父组件实例子 $parent
  

this.$parent
在子组件中判断this.$parent获取的实例是不是父组件的实例
在子组件中console.log(this.$parent)  打印出this.$parent
在父组件中console.log(this)  打印出this
看看打印出来的两个实例是不是同一个
如果是同一个  就可以在子组件中通过this.$parent.属性名和方法名，来调用父组件中的数据或者方法

• 12 父组件访问子组件变量   this.$refs.usernameInput
  

给子组件添加ref属性然后，通过vm.$refs来调用子组件的methods中的方法或者获得data
父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用

vue面试题

转载自：https://www.jianshu.com/p/0cdf51904afb

• 计算属性如何使用
  

一般我们在写vue的时候，在模板内写的表达式非常便利，它运用于简单的运算，但是他也有一些复杂的逻辑，包括运算、函数调用等，那么就用到了计算属性，他依赖于data中数据变化的  data 中数据变化的时候    计算属性就会重新执行，视图也会更新。

• 计算属性的 set  get 如何使用
  

每一个计算属性都包含一个getter 和一个setter ；
绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。
但在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，

• watch 如何使用
  

之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后，登录按钮才可以点击。
在没有使用vue之前，我们可能是通过input的change事件来判断，用户是否输入了内容，然后修改按钮的状态。现在有了vue，就省事了很多，我们只需要在watch中，监听数据模型的值改变即可。
在input 上绑定一个v-mode="pass"绑定一个数据名， 在data里写入绑定的事件名，通过watch来监听输入内容的改变，但是如果，监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep：true.也叫深度监听  
<input v-model="passw2" placeholder="请再次输入密码" />

• 计算属性和watch的区别
  

在我们运用vue的时候一定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。
就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，
而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

• prop 验证，和默认值
  

我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告
比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。

• prop 如何传一个对象的所有属性
  

方法一：使用不带参数的v-bind写法
v-bind中没有参数，而组件中的props需要声明对象的每个属性
方法二：使用带参数的v-bind写法
v-bind后跟随参数todo，组件中的props需要声明该参数，也就是v-bind后跟随参数todo，
组件就可以通过todo来访问对象的属性

• 插槽，具名插槽，插槽默认内容
  

单个插槽；在父组件写一个标签，在子组件通过slot来接受标签里的内容,他只能用一个slot。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。
具名插槽：在父组件标签写入slot，子组件里面写name名字，他们两个名字要相对应，才能通过名字在找到对应的位置。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

• 作用域插槽
  

举个例子，比如我写了一个可以实现条纹相间的列表组件，发布后，使用者可以自定义每一行的内容或样式（普通的slot就可以完成这个工作）。而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数，子组件与父组件的数据动态交互的一种常见案例
父组件中必须要有template元素，且必须有scope特性，scope特性中是临时变量名，
接收从子组件中传递上来的属性，属性可以是任意定义的。

• 动态组件
  

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。
我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。如果要把组件切换过程中的将状态保留在内存中，可以添加一个 keep-  alive 指令参数，防止重复渲染DOM。
动态组件上使用keep-alive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

• 11子组件访问父组件实例子 $parent
  

this.$parent
在子组件中判断this.$parent获取的实例是不是父组件的实例
在子组件中console.log(this.$parent)  打印出this.$parent
在父组件中console.log(this)  打印出this
看看打印出来的两个实例是不是同一个
如果是同一个  就可以在子组件中通过this.$parent.属性名和方法名，来调用父组件中的数据或者方法

• 12 父组件访问子组件变量   this.$refs.usernameInput
  

给子组件添加ref属性然后，通过vm.$refs来调用子组件的methods中的方法或者获得data
父组件： 在子组件中加上ref即可通过this.$refs.ref.method调用