通过props实现正向传递数据:父组件正向的向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或者执行操作。 props使得父子之间形成了单向下行绑定:父级传递的数据的更新会向下流动到子组件中,但是反过来则不行。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
一个vue实例应该通过new Vue来创建根实例,所有的 vue 组件其实都是 vue 实例
之前博主有分享过Vue学习由浅到深的文章(Vue学习之从入门到神经) 现在Vue学的好的话马内真的不必后端差 所以今天博主就汇总下有关Vue的相关面试题
然后给botton标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也新增一行
接下来我们来实现登录组件,以前我们都是写在一个文件中,但是为了复用性,开发中都会把组件放入独立的JS文件中,我们新建一个user目录以及login.js及register.js:
diff算法是一种优化手段,将前后两个模块进行差异化对比,修补(更新)差异的过程叫做patch(打补丁),从以下几点来理解:
由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。
在 Vue 2 中,响应式原理就是使用的 Object.defineProperty 来实现的。但是在 Vue 3.0 中采用了 Proxy,抛弃了 Object.defineProperty 方法。
MVVM 是 Model-View-ViewModel 缩写,也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型,View 代表 UI 组件,
{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
从 JavaScript 的数据双向绑定(defineProperty、Proxy)开始,谈谈 Vue2 中的数组监听问题。
基础 - 系统指令 -v-for ( key 属性)(非常重要的面试题) 基础 - 系统指令 -v-for ( key 属性)(非常重要的面试题)
回顾Vue2,我们知道每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher,从而使关联的组件重新渲染
大致说一下项目的背景:我们做了一个拖拽生成报表的系统,通过拖拽内置的组件供用户定制自己的报表形态,但毕竟内置的组件有限,可定制性不高,那么给用户开放一个 code 组件,让用户自己通过写template + js + css的方式自由定制岂不是妙哉。
Vue3是Vue.js的最新版本,于2020年9月18日正式发布。Vue3相比Vue2有很多改进和优化,包括但不限于:
为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。
官方推荐使用写法1来定义全局注册组件命名,以避免可能出现的与HTML元素相冲突的情况。
如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速
vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑:
只需要在组件即将被销毁的生命周期 componentWillUnmount (react)中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。在这里面需要注意的是组件更新状态的时机。
101.Vue3.0 里为什么要用 Proxy API替代 defineProperty API?
通过webpack的tree-shaking功能,可以将无用模块“剪辑”,仅打包需要的
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念--组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。
为了金三银四的跳槽季做准备,并且我是 vue 技术栈的,所以整理了若干个 vue 的面试题。
动态组件我相信大部分在开发的过程中都会用到,当我们需要在不同的组件之间进行状态切换时,动态组件可以很好的满足我们的需求,其中的核心是component标签和is属性的使用。
Vue最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通JS对象,修改它则更新视图(view)。这会让状态管理变得非常简单且直观,不过理解它的工作原理以避免一些常见的问题也是很重要的。
Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟 DOM、运行速度快,并且作者是中国人尤雨溪,对应的 API 文档对国内开发者优化,作为前端 开发人员的首选入门框架 Vue 的优势: 1、Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。 2、Vue.js 最突出的优势在于可以对数据进行双向绑定。 3、使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能 显示出非常好看的效果。 4、相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页 面。 5、vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和 dom,这样大大加快了访问速度和提升用户体验。 6、而且他的第三方 UI 组件库使用起来节省很多开发时间,从而提升开发效率。
https://juejin.im/post/5ec358126fb9a0432a3c49e6
在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作。但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据。难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的功能。本章,我们就来学习 Vue 中 ref 的相关使用。
在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步
进入项目目录下的config/index.js文件中的build对象下的assetsPublicPath属性,将assetsPublicPath属性的值由 assetsPublicPath: '/',改成 assetsPublicPath: './'
1.一个Vue实例相当于一个MVVM模式中的ViewModel,在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期勾子等选项
CommoneJS规定每个文件是一个模块。将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境;而后者会形成一个属于模块自身的作用域,所有的变量及函数只有自己能访问,对外是不可见的。
单页面应用程序(英文名:Single Page Application)简称SPA,顾名思义,指的是一个web网站中只有唯一的一个HTML页面,所有的功能和交互都是在这唯一的一个页面内完成。
可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式是相同的
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
ViewModel把view和model关联起来,ViewModel负责把Model的数据同步到view显出来,还负责吧view修改同步到Model。 答案详情
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
我们会发现其实在vue2源码中,本质上就是利用Object.defineProperty来劫持对象。
找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴。
可以看到,组件内部只有一个动态节点,剩余一堆都是静态节点,所以这里很多 diff 和遍历其实都是不需要的,造成性能浪费
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
前言 ❝ 做了半年的公司系统,终于就在前天上线了。后期改BUG时间拖得太长了,出现的大部分BUG 是 前端 与后端 信息不对称导致的,逻辑性错误不怎么多,业务比较用户体验上稍微差点,毕竟第一次做这么大的系统(100w+),通过这次系统的开发,总结了不少经验,如何更好的跟后端人员协作开发以及如何设计来提高用户体验上,之前自己做开发没关注这方面,只注重功能实现,后期的这块多补补。 项目上线后,接下来就是后期的维护更新了,最近时间终于不是之前那么忙碌了,简单的对系统做了下复盘。由于项目采用的技术栈
[3245a3c0598b4b79b32f60649ded9cca~tplv-k3u1fbpfcp-watermark.image] 前言 做了半年的公司系统,终于就在前天上线了。后期改BUG时间拖得太长了,出现的大部分BUG 是 前端 与后端 信息不对称导致的,逻辑性错误很不多,用户体验上稍微差点,毕竟第一次做这么大的系统(100w+),通过这次系统的开发,总结了不少经验,如何更好的跟后端人员协作开发以及如何设计来提高用户体验上,之前自己做开发没关注这方面,只注重功能实现,后期的这块多补补。
vue-router 有 3 种路由模式:hash、history、abstract,对应的源码如下所示
领取专属 10元无门槛券
手把手带您无忧上云