2024年Web前端最新vue2与vue3的区别，前端面试基础题

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

fullName(){

return this.firstName+" "+this.lastName;

}

}

}

vue3

export default {

props: {

title: String

},

setup () {

const state = reactive({ //数据

username: ‘’,

password: ‘’,

lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性

})

//方法

const login = () => {

// 登陆方法

}

return {

login,

state

}

}

}

4. 建立数据 data

Vue2 - 这里把数据放入data属性中

export default {

props: {

title: String

},

data () {

return {

username: ‘’,

password: ‘’

}

}

}

在Vue3.0，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据:

1. 从vue引入reactive

2. 使用reactive()方法来声名我们的数据为响应性数据

3. 使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

import { reactive } from ‘vue’

export default {

props: {

title: String

},

setup () {

const state = reactive({

username: ‘’,

password: ‘’

})

return { state }

}

}

template使用，可以通过state.username和state.password获得数据的值。

{{ state.username }}

5. 生命周期钩子 — Lifecyle Hooks

Vue2--------------vue3

beforeCreate -> setup()

created -> setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

1. setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method

2. onBeforeMount() : 组件挂载到节点上之前执行的函数。

3. onMounted() : 组件挂载完成后执行的函数。

4. onBeforeUpdate(): 组件更新之前执行的函数。

5. onUpdated(): 组件更新完成之后执行的函数。

6. onBeforeUnmount(): 组件卸载之前执行的函数。

7. onUnmounted(): 组件卸载完成后执行的函数

• 若组件被<keep-alive>包含，则多出下面两个钩子函数。

9. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。

10. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

6.父子传参不同，setup() 函数特性

总结：

1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

4、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作：

父传子，props

import { toRefs } from ‘vue’

setup(props) {

const { title } = toRefs(props)

console.log(title.value)

onMounted(() => {

console.log('title: ’ + props.title)

})

}

子传父，事件 - Emitting Events

举例，现在我们想在点击提交按钮时触发一个login的事件。

在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

login () {

this.$emit(‘login’, {

username: this.username,

password: this.password

})

}

在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

然后我们在login方法中编写登陆事件

另外：context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

setup (props, { attrs, slots, emit }) {

// …

const login = () => {

emit(‘login’, {

username: state.username,

password: state.password

})

}

// …

}

3、 setup()内使用响应式数据时，需要通过.value获取

import { ref } from ‘vue’

const count = ref(0)

console.log(count.value) // 0

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

5、setup函数只能是同步的不能是异步的

7. vue3 Teleport瞬移组件

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件

this is a modal

<button @click=“buttonClick”>Close

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

x solid black;

background: white;

position: fixed;

left: 50%;

top: 50%;

margin-left: -100px;

margin-top: -100px;

}

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整