Vue3笔记

68 阅读2分钟

vue3中的steup是语法糖模式,vite会自动帮我们编译加上setup函数的,也会自动帮我们导出变量 vue3采用的是proxy代理方式来解决响应式问题,比vue2的definePropoty性能好很多

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、什么是v-model指令?

v-model指令是:它负责监听用户输入事件,从而更新数据,并对一些极端场景进行一些特殊的处理。使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定,v-model只能运用在表单元素中。

怎么使用v-model指令?

1、首先创建一个组件,在src/components/文件夹下新建一个day01.vue。

2、在day01.vue写p元素和input元素,在input元素使用v-model。

3、在App.vue导入这个day01.vue组件,然后在template中加入day标签。 四:插槽-slot

Vue插槽可以将其理解为电脑USB接口。即预留一个位置在页面上,一般情况下它并不会显示任何东西。通过外部接入东西来实现不同的功能。

(tips:因为不会显示任何东西,所以不要直接给slot插槽添加任何CSS样式,这会导致一些不可知的问题发生。而应该在slot外面包裹一层div,设置div的样式)

五:关于Vue的响应式渲染(数组)

1:在更新数组时,Vue只响应某些可以改变数组的方法。有(push,pop,shift,unshift,reverse,splice,sort)。调用这些方法改变一个数组时,浏览器会即时响应并渲染新的数组数据。

2:而对于其他,类似于data[0]=xxx,数据会改变,但浏览器不会即时渲染

与React.js相比

相同点

  • React采用了JSX语法,Vue也可使用特殊文件格式
  • 都不内置Ajax,Router等功能的核心包,而是以插件的形式加载
  • 在组件开发中都支持mixins的特性
  • 利用虚拟DOM实现快速渲染

不同点

  • vue在模板中提供了指令,过滤器等,可以非常方便的操作DOM
  • 渲染过程不同
  • vue实现了数据的双向绑定,react数据流动是单向的