vue面试题

• • vue插槽？
  • vue3中如何获取refs，dom对象的方式？
  • vue3中生命周期的和vue2中的区别？
  • 说说vue中的diff算法？
  • 说说 Vue 中 CSS scoped 的原理？
  • vue3中怎么设置全局变量？
  • Vue中给对象添加新属性时，界面不刷新怎么办?
  • 谈谈对Vue中双向绑定的理解？
  • 为什么vue2和vue3语法不可以混用？
  • vue3中setup函数如何进行组件通讯？

vue插槽？

slot又名插槽，是vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而在一个标签元素是否显示，以及怎么显示是父组件决定的。slot又分为三类，默认插槽，具名插槽，作用域插槽。
默认插槽：又称匿名插槽，当slot没有指定name属性值的时候，一个组件内只能有一个匿名插槽。

	首先在父组件中引入子组件，并在引入的子组件标签内插入需要的html元素，在子组件中把需要用插槽的地方用标签替代

具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。

	父组件子组件

作用域插槽：默认插槽，剧名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，作用域插槽
数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，也就是说，作用域插槽的不同之处就在于，数据不在父组件身上，而是在子组件身上，且组件的结构和内容由父组件决定。作用域组件限定了组件内结构和数据的展示范围，以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。

//子组件

//父组件

vue3中如何获取refs，dom对象的方式？

方式一：setup函数方法内，获取单个ref属性绑定的dom元素：

		// 先定义一个空的响应式数据ref定义的// setup中返回该数据，你想获取哪个dom元素，在该元素上使用ref属性绑定该数据即可。

方式二：获取多个ref属性绑定的dom元素。

使用ref绑定一个函数，在函数里把dom添加到数组里面

总结：

    单个元素： 先声明ref响应式数据，返回给模板使用，通过ref绑定数据遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模板使用，通过ref绑定这个函数

vue3中生命周期的和vue2中的区别？

点击查看详情

说说vue中的diff算法？

点击查看详情

说说 Vue 中 CSS scoped 的原理？

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

vue中的scoped属性的效果主要通过PostCSS转译实现

PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

vue3中怎么设置全局变量？

在vue2中，我们知道vue2.x是使用Vue.prototype.xxxx=xxx来定义全局变量，然后通过this.xxxx=xxx来定义全局变量，然后通过this.xxxx=xxx来定义全局变量，然后通过this.xxx来获取全局变量。

但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的。
vue3.0依赖注入的方式注册使用全局变量
在 main.js 中

const app = createApp(App)// 配置全局变量 页面中使用 inject 接收
app.provide('global',{store,axios
})app.use（）进行使用

采用这种方法在全局变量的创建上会更加的方便 ， 而且不用担心会出现像axios在使用globalProperties设置为全局对象后丢失axios对象只剩axios对象只剩axios对象只剩http之类的问题。
vue3.0store仓库进行存放全局变量
创建store文件夹
store文件夹下创建index文件
state中定义状态或数据

const store = createStore({state () {return {base:"",//基本数据}},mutations: {/*修改基础数*/changeBase(state,base) {state.base=base;},}
})
export default store;

.组件使用

store.commit("changeBase","test")//设置全局变量的值
let data=store.state.lnglat//取用全局变量的值

Vue中给对象添加新属性时，界面不刷新怎么办?

谈谈对Vue中双向绑定的理解？

Vuejs 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty0来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤:
1.需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
2.compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知更新视图
3.Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: @在自身实例化时往属性订阅器(dep)里面添加自己 @自身必须有一个update0方法 待属性变动dep.notice0通知时，能调用自身的update0方法，并触发
4.Compile中绑定的回调，则功成身退。4.MVVM作为数据绑定的入口，整合Observer、 Compile和Watcher三者，通过Observer来监听自己的model数据变化通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新;视图交互变化(input) ->数据model变更的双向绑定效果。

为什么vue2和vue3语法不可以混用？

优先级：
出现重名自变量，会根据书写顺序进行页面的展示。
vue2中的data和vue3中的setup

vue3中setup函数如何进行组件通讯？

• setup语法糖方式通信：

父传子——defineProps

		1.父组件使用子组件，在子组件标签里面，通过标签属性的方式进行数据传递2.在子组件引入import { defineProps } from 'vue'defineProps方法定义变量名进行接收，template模板中进行使用。

子传父——defineEmits

父组件在子组件标签上通过v-on绑定自定义事件，子组件通过 const emits = defineEmits([‘事件名’])进行接收。
在子组件B中通过defineEmits注册一个事件名，然后在子组件B的方法中通过emit传递给父组件A。在组件A中，就可以为一些元素添加该事件名绑定事件方法。然后组件A在script setup中写这个事件方法，传递的参数就是子组件B在emit传递过来的值。这个值我们赋值给const的ref定义的数据，从而动态修改数据。

• setup函数嵌套方式通信
  父传子props

   父组件中使用子组件的标签在 子组件 setup 方法内使用props 来接收父组件传过来的数据。