yellowsae / blog Goto Github PK
View Code? Open in Web Editor NEW🚀 语雀
Home Page: https://www.yuque.com/yellowsea
🚀 语雀
Home Page: https://www.yuque.com/yellowsea
这样做的好处是
ref可以定义对象或数组的,它只是内部自动调用了reactive来转换。
hash
每次webpack 构建时都会生成一个唯一的 hash 值chunkhash
是根据 chunk 生成的 hash 值。 如果打包来源于同一个chunk (打包来源于同一个文件), 那么hash 值就一样contenthash
是根据文件的内容生成 hash 值。 不同文件的 hash 值 一定不一样。var
, let
都是可以定义变量的,const
定义常量,而且必须要赋值,不能修改let
, const
具有块级作用域, 不能重复声明, 不存在变量的提升let
, const
, var
都受函数作用域的限制父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
父beforeUpdate-> 子beforeUpdate -> 子updated -> 父updated
父beforeUpdate -> 父updated
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
let
、 const
用官网的理解来说, Vue是一套用于构建用户页面的渐进式框架。它的设计为可以自底向上逐层应用。
Vue的核心库只关注视图层,易上手,方便整合第三方库。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue是一个基于MVVM模式数据驱动页面的框架,它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点:(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
Vue靠数据驱动双向绑定是我们开发页面更简单, 开发者不需要手动的去修改DOM 。 Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定底层是通过 Object.defineProperty()
定义的数据 set
get
函数原理实现
Model : 数据层,仅仅关注数据本身, 不关心任何行为。
对应vue组件中的data, props属性
View : 视图层, 用户操作页面, 当 view-mode 对 model 更新的时候, 会通过数据绑定更新到view。
对应vue组件中的 template 和 style 的部分
View Model : 业务逻辑层, view 需要什么数据,View Model 就提供什么数据, view 有那些操作,View Model就要相应那些操作,View和ViewModel两种交互方式:双向数据传递(数据属性和data binding)和单向传递操作(命令属性);由于ViewModel的双向数据绑定,当Model发生变化时,ViewModel就会更新,ViewModel变化,Model也会更新。
对应继承Vue类的组件实例
什么是组件化,组件化就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue
中每一个.vue
文件都可以视为一个组件。
组件化开发指的是将复杂的业务拆分为一个有一个的组件
组件化开发的组件一般来说要灵活
解释:指令 (Directives) 是带有 v- 前缀的特殊属性作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
v-if
v-for
v-bind
v-on
v-model
没有指令之前我们是怎么做的?是不是先要获取到DOM然后再....干点啥
=>
定义函数。普通函数是以 function
定义函数this
, 箭头函数中的this
取决于调用箭头函数的第一个普通函数的this
arguments
。在箭头函数中访问了 arguments
, 实际上获得的外部局部函数执行中的值call apply bind
并不会影响箭头函数的 this
指向this
指向上下文,而普通函数的 this
并非指向上下文, 需要时加入 bind(this)
其中文件的解析与构建是一个比较复杂的过程,在webpack
源码中主要依赖于compiler
和compilation
两个核心对象实现。
compiler对象是一个全局单例,他负责把控整个webpack打包的构建流程。
compilation对象是每一次构建的上下文对象,它包含了当次构建所需要的所有信息,每次热更新和重新构建,compiler都会重新生成一个新的compilation对象,负责此次更新的构建过程。
从官网上的描述我们其实不难理解,webpack的作用其实有以下几点:
模块打包。可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块,保证项目结构的清晰和可读性。
编译兼容。在前端的“上古时期”,手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情,而在今天这个问题被大大的弱化了,通过webpack的Loader机制,不仅仅可以帮助我们对代码做polyfill,还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件,让我们在开发的时候可以使用新特性和新语法做开发,提高开发效率。
能力扩展。通过webpack的Plugin机制,我们在实现模块化打包和编译兼容的基础上,可以进一步实现诸如按需加载,代码压缩等一系列功能,帮助我们进一步提高自动化程度,工程效率以及打包输出的质量。
在vue开发的SPA页面中,稍微复杂的页面都会需要到路由。
vue-router
共有三种路由模式hash
和history
,abstract
hash
模式其实就是把前端路由路由使用 #
号拼接到真实的url后面的模式。当 #
后面的路径发生变化时, 浏览器不会重新发起请求,而是会触发 onhashchange
事件
history API
是 H5 提供的特性,允许开发者直接更改前端路由,也就是更新浏览器的url地址,不会重新发起请求
对于 history 来说,主要有以下特点:
优化打包构建速度
优化代码调试
优化打包构建速度
优化代码运行的性能
官网的解释: vue是一个创建用户界面的渐进式JavaScript框架, 也是创建单页面应用的Web框架。
Vue把图形,非图形的各种逻辑均抽象为一个统一的概念 (组件) 来实现开发模式。
在Vue中把每一个 .vue 文件看做一个组件
在vue中具有自己的指令系统,带有 v-
开头的一些指令。能够更方便的获取和操作DOM
防抖:在第一次触发事件时,不立即执行函数,而是给出一个时间段,如果短时间内大量触发同一事件,只会执行一次函数。
节流:函数执行一次后,在某个时间段内暂时失效,过了这段时间后再重新激活,如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再生效,直至过了这段时间才重新生效。
对于防抖和节流一个最主观的判断方法就是:在10s内你疯狂点击一个按钮,如果使用了防抖则会只执行一次,而你使用了节流则会每隔一段时间执行一次,这个时间可以自己来掌控。
ref
定义的响应式数据,数据改变时, 出现newVal和oldVal一样, oldValue无法正确获取reactive
定义的响应式数据时,出现newVal和oldVal一样, oldValue无法正确获取reactive
定义的响应式,强制开启深度监视(deep:true),并且无法关闭reactive
定义响应式对象时的几个注意点想单独监视对象中的某一个属性,必须要使用 函数 return的方式写
watch(() => names.age, (newVal, oldVal) => { // 不能这样names.age单独监视对象属性
console.log(`name.age改变了`, newVal, oldVal)
}, {deep: true})
监视对象多个属性
不会出现ref监视多个属性时候,不会出现newVal和oldVal 一样的情况 , 这是能够完全达到监视的目的
watch([() => names.age, () => names.familyName], (newVal, oldVal) => {
console.log(`name.age改变了`, newVal, oldVal)
}, {deep: true})
监视深度属性
//第一种
watch(()=> names.job.salary,(newValue,oldValue)=>{
console.log('names改变了',newValue,oldValue)
})
//第二种
watch(()=> names.job,(newValue,oldValue)=>{
console.log('names改变了',newValue,oldValue)
},{deep:true})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.