vue面试题(day04)

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元素,在子组件中把需要用插槽的地方用<slot>标签替代

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

	父组件
	<template v-slot:名称>
  			内容
  	</template>
  	子组件
  	 <slot name="name名称"></slot>

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

//子组件
 		<footer>
           <ul>
            <li v-for="(item,index) in data" :key="index">
            <slot :item="item">
                {{ item.hobby}}——{{ item.check}}
            </slot>
            </li>
           </ul>
           <span>{{ nums }}</span><button>+</button>
        </footer>
//父组件
 <template v-slot="{item}">
        {{ item.hobby }}
 </template>

vue3中如何获取refs,dom对象的方式?

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

		// 先定义一个空的响应式数据ref定义的
    	// setup中返回该数据,你想获取哪个dom元素,在该元素上使用ref属性绑定该数据即可。
<template>
  <h1 ref="box">Ref属性获取dom</h1>
</template>
 
<script>
import { ref, onMounted } from 'vue'
export default {
    setup () {
        let box = ref(null)
        onMounted(function () {
            console.log(box.value);
        })
        return {
            box
        }
    }
}
</script>

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

使用ref绑定一个函数,在函数里把dom添加到数组里面
<template>
  <h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
 
<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 获取v-for遍历的元素
        // 定义一个空数组,接收所有的LI
        // 定义一个函数,往空数组push Dom
        let listDom = []
        const getlist = (el) => {
            listDom.push(el)
        }
        console.log(listDom);
        return {
            getlist
        }
    }
}
</script>

总结:

    单个元素: 先声明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. x x x x = x x x 来定义全局变量,然后通过 t h i s . 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设置为全局对象后丢失 a x i o s 对象只剩 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中给对象添加新属性时,界面不刷新怎么办?

vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。
所以在vue中可以使用this.$set(对象名,‘属性名’,属性值)的方法去给对象添加属性,或者使用Vue.set(对象名,‘属性名’,属性值)的方法进行添加,添加之后的属性就带有响应式了

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

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
VUE双向数据绑定,其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。

 1. 需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,
给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。

 2. compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定
  更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
  
3.watcher订阅者是observer和compile之间通信的桥梁,主要做的事情是:1*.在自身实例化时往属性订阅器里面添加自己
	2*.组件自身必须有一个update()方法.3*待属性变动dep.notice()通知时,能调用自身的update()方法,
	并触发complie中绑定的回调,则功成身退。
	
4. MVVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数据变化,
通过compile来解析编译模板指令,最终利用watcher搭起来Observer和Compile之间的通信桥梁,达到数据变化,
视图更新,视图交互话变化,数据model变更的双向绑定效果。

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

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

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

  • setup语法糖方式通信:

父传子——defineProps

		1.父组件使用子组件,在子组件标签里面,通过标签属性的方式进行数据传递
		<template>
			<children :list="list"></children>
		</template>
		2.在子组件引入import { defineProps } from 'vue'
		
			<script setup>
		 import { defineProps } from 'vue'
		const props = defineProps({
			  	  list: {
			      type: Array,
			      default: () => []
			   	 }
			  	})
			</script>
			 defineProps方法定义变量名进行接收,template模板中进行使用。

子传父——defineEmits

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

	<template>
			 <div>
			    <input v-model="value" type="text" placeholder="请输入" />
			    <button @click="handleAdd"> 添加 </button>
			  </div>
			</template>
			<script setup>
			  import { ref, defineEmits } from 'vue'
			
			  const value = ref('')
			  const emits = defineEmits(['add'])
			
			  const handleAdd = () => {
			    emits('触发的方法', 传递的参数)
			  }
			</script>
  • setup函数嵌套方式通信
    父传子props

     父组件中使用子组件的标签
     在 子组件 setup 方法内使用props 来接收父组件传过来的数据。
     	<template>
     	  <div>
     	    <Article :msg="name"></Article>
     	  </div>
     	</template>
     	
     	<script>
     	import Article from '@/components/Article.vue' 
     	export default {
     	  components: {
     	    Article
     	  },
     	  setup() {
     	    return {
     	      name: '渐行渐远渐无书,水阔鱼沉何处问'
     	    }
     	  }
     	}
    

子传父 content

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子组件向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    function sendToParent() {
      content.emit('change')
    }
    return {
      sendToParent
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/685.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

让你少写多做的 ES6 技巧

Array.of 关于奇怪的 Array 函数&#xff1a; 众所周知&#xff0c;我们可以通过Array函数来做以下事情。 初始化一个指定长度的数组。 设置数组的初始值。 // 1. Initialize an array of the specified length const array1 Array(3) // [ , , ] // 2. Set the initial value…

Spring Cloud学习笔记【负载均衡-Ribbon】

文章目录什么是Spring Cloud RibbonLB&#xff08;负载均衡&#xff09;是什么Ribbon本地负载均衡客户端 VS Nginx服务端负载均衡区别&#xff1f;Ribbon架构工作流程Ribbon Demo搭建IRule规则Ribbon负载均衡轮询算法的原理配置自定义IRule新建MyRuleConfig配置类启动类添加Rib…

SQLMap 源码阅读

0x01 前言 还是代码功底太差&#xff0c;所以想尝试阅读 sqlmap 源码一下&#xff0c;并且自己用 golang 重构&#xff0c;到后面会进行 ysoserial 的改写&#xff1b;以及 xray 的重构&#xff0c;当然那个应该会很多参考 cel-go 项目 0x02 环境准备 sqlmap 的项目地址&…

学习java——②面向对象的三大特征

目录 面向对象的三大基本特征 封装 封装demo 继承 继承demo 多态 面向对象的三大基本特征 我们说面向对象的开发范式&#xff0c;其实是对现实世界的理解和抽象的方法&#xff0c;那么&#xff0c;具体如何将现实世界抽象成代码呢&#xff1f;这就需要运用到面向对象的三大…

从ChatGPT与New Bing看程序员为什么要学习算法?

文章目录为什么要学习数据结构和算法&#xff1f;ChatGPT与NEW Bing 的回答想要通关大厂面试&#xff0c;就不能让数据结构和算法拖了后腿业务开发工程师&#xff0c;你真的愿意做一辈子CRUD boy吗&#xff1f;对编程还有追求&#xff1f;不想被行业淘汰&#xff1f;那就不要只…

2023年网络安全比赛--CMS网站渗透中职组(超详细)

一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 1.使用渗透机对服务器信息收集,并将服务器中网站服务端口号作为flag提交; 2.使用渗透机对服务器信息收集,将网站的名称作为flag提交; 3.使用渗透机对服务器渗透,将可渗透页面的名称作为flag提交; 4.使用渗透机对服务器渗透,…

一个Bug让人类科技倒退几十年?

大家好&#xff0c;我是良许。 前几天在直播的时候&#xff0c;问了直播间的小伙伴有没人知道「千年虫」这种神奇的「生物」的&#xff0c;居然没有一人能够答得上来的。 所以&#xff0c;今天就跟大家科普一下这个人类历史上最大的 Bug 。 1. 全世界的恐慌 一个Bug会让人类…

jQuery《一篇搞定》

今日内容 一、JQuery 零、 复习昨日 1 写出至少15个标签 2 写出至少7个css属性font-size,color,font-familytext-algin,background-color,background-image,background-sizewidth,heighttop,bottom ,left ,rightpositionfloatbordermarginpadding 3 写出input标签的type的不…

flex布局左边宽度固定,右边宽度动态扩展问题

我们希望在一个固定宽度的容器中&#xff0c;分左右两边&#xff0c;左边宽度固定大小&#xff0c;右边占满&#xff0c;使用flex布局时&#xff0c;如下&#xff1a; 对应代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta…

LeetCode - 198 打家劫舍

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装…

【华为机试真题 Python实现】2023年1、2月高频机试题

文章目录2023年1季度最新机试题机考注意事项1. 建议提前刷题2. 关于考试设备3. 关于语言环境3.1. 编译器信息3.2. ACM 模式使用sys使用input&#xff08;推荐&#xff09;3. 关于题目分值及得分计算方式4. 关于做题流程5. 关于作弊2023年1季度最新机试题 两个专栏现在有200博文…

2023还有人不知道kubernetes?| 初步理解kubernetes

文章目录Kubernetes(K8s)一、Openstack&VM1、**认识虚拟化****1.1**、什么是虚拟化**1.2、虚拟化分类**2、OpenStack与KVM、VMWare2.1、OpenStack2.2、KVM2.3、VMWare二、容器&编排技术1、容器发展史1.1、Chroot1.2、FreeBSD Jails1.3、Solaris Zones1.4、LXC1.5、Dock…

深度学习 Day26——使用Pytorch实现猴痘病识别

深度学习 Day26——使用Pytorch实现猴痘病识别 文章目录深度学习 Day26——使用Pytorch实现猴痘病识别一、前言二、我的环境三、前期工作1、设置GPU导入依赖项2、导入猴痘病数据集3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式…

【LeetCode】1544. 整理字符串、LCP 44. 开幕式焰火

作者&#xff1a;小卢 专栏&#xff1a;《Leetcode》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 目录 1544. 整理字符串 LCP 44. 开幕式焰火 1544. 整理字符串 1544. 整理字符串 题目描述…

金三银四、金九银十 面试宝典 Spring、MyBatis、SpringMVC面试题 超级无敌全的面试题汇总(超万字的面试题,让你的SSM框架无可挑剔)

Spring、MyBatis、SpringMVC 框架 - 面试宝典 又到了 金三银四、金九银十 的时候了&#xff0c;是时候收藏一波面试题了&#xff0c;面试题可以不学&#xff0c;但不能没有&#xff01;&#x1f941;&#x1f941;&#x1f941; 一个合格的 计算机打工人 &#xff0c;收藏夹里…

正则表达式高阶技巧之匹配模式(使用python实现)

匹配模式介绍不区分大小写模式模式的指定方式应用单行模式多行模式注释模式其它模式修饰符的作用范围介绍 我们在正则中所说得匹配模式&#xff08;match mode&#xff09;&#xff0c;指的是匹配时使用的规则。设置特定的匹配模式&#xff0c;可能会改变对正则表达式的识别&a…

业内人士真心话,软件测试是没有前途的,我慌了......

我在测试行业爬模滚打7年&#xff0c;从点点点的功能测试到现在成为高级测试&#xff0c;工资也翻了几倍。个人觉得&#xff0c;测试的前景并不差&#xff0c;只要自己肯努力。 我刚出来的时候是在鹅厂做外包的功能测试&#xff0c;天天点点点&#xff0c;很悠闲&#xff0c;点…

Spark SQL支持DataFrame操作的数据源

DataFrame提供统一接口加载和保存数据源中的数据&#xff0c;包括&#xff1a;结构化数据、Parquet文件、JSON文件、Hive表&#xff0c;以及通过JDBC连接外部数据源。一个DataFrame可以作为普通的RDD操作&#xff0c;也可以通过&#xff08;registerTempTable&#xff09;注册成…

嵌入式安防监控项目——实现真实数据的上传

目录 一、相关驱动开发 二、A9主框架 三、脚本及数据上传实验 https://www.yuque.com/uh1h8r/dqrma0/tx0fq08mw1ar1sor?singleDoc# 《常见问题》 上个笔记的相关问题 一、相关驱动开发 /* mpu6050六轴传感器 */ i2c138B0000 { /* #address-cells <1>…

web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation

文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分 <div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…
最新文章