Nuxt项目网页源代码包含大量的css问题解决方案

修改nuxt.config.js文件 build: { // 将内嵌CSS样式提取到外部 extractCSS: { allChunks: true }, }

技术 · 09-08
Nuxt项目网页源代码包含大量的css问题解决方案

如何确认this的值

JavaScript中的this在绝大多数情况下，函数的调用方式决定了 this 的值(运行时绑定)。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。如何确认this的值:在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。1.全局执行环境中，指向全局对象(非严格模式、严格模式)2.函数内部，取决于函数被调用的方式 1.直接调用的this值:a.非严格模式：全局对象（window） b.严格模式：undefined2.对象方法调用的this值：调用者 /** * 如何确认this的值 * 1.全局执行环境 * 严格模式，非严格模式:全局对象（window） * 2.函数内部 * 2.1 直接调用 * 严格模式下:undefined * 非严格模式:全局对象（window） * 2.2 对象方法调用 * 严格模式，非严格模式:调用者 * 3.开启严格模式 * 脚本开启: 'use st

技术·面试 · 09-05
如何确认this的值

Vue监视数据的原理

1.vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API: Vue.set(target，propertyName/index， value) 或 vm.$set(target，propertyName/index， value）3.如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法: 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!

技术 · 08-30
Vue监视数据的原理

vue2中watch的深度监视

深度监视:(1).Vue中的watch默认不监测对象内部值的改变 (一层)。(2).配置deep:true可以监测对象内部值改变 (多层)。备注:(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

技术 · 08-23
vue2中watch的深度监视

vue2监视属性watch

1.当被监视的属性变化时，回调函数自动调用，进行相关操作2.监视的属性必须存在，才能进行监视3.监视的两种写法:(1).new Vue时传入watch配置(2).通过vm.$watch监视

技术 · 08-23
vue2监视属性watch

Vue中的数据代理

1.通过vm对象来代理data对象中属性的操作 (读/写)2.Vue中数据代理的好处:更加方使的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作 (读/写) data中对应的属性。

技术·面试 · 08-23
Vue中的数据代理

Object.defineProperty()方法

let number = 18 let person = { name:'张三', sex:'男' } Object.defineProperty(person,'age',{ value:18, enumerable:true, //控制属性是否可以枚举，默认值是false writable:true, //控制属性是否可以被修改，默认值是false configurable:true, //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) n

技术 · 08-23
Object.defineProperty()方法

vue2计算属性对比methods

计算属性:1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了objcet.defineProperty方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势: 与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便5.备注:1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

技术 · 08-21
vue2计算属性对比methods

简化运行TS的步骤

问题描述:每次修改代码后，都要重复执行两个命令，才能运行TS代码，太繁琐。简化方式:使用 ts-node 包，直接在Node.js 中执行TS代码。安装命令: npm i -g ts-node (ts-node包提供了ts-node 命令)。使用方式: ts-node hello.ts解释: ts-node 命令在内部偷偷的将TS->JS，然后，再运行JS代码

技术 · 08-13
简化运行TS的步骤

TypeScript相比JS的优势

1.更早(写代码的同时)发现错误，减少找Bug、改Bug时间，提升开发效率2.程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验3.强大的类型系统提升了代码的可维护性，使得重构代码更加容易4.支持最新的ECMAScript 语法，优先体验最新的语法，让你走在前端技术的最前沿5.TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本除此之外，Vue3源码使用TS重写、Anaular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首选编程语言

技术 · 08-13
TypeScript相比JS的优势
2014 - 2023 杀死一只知更鸟. All Rights Reserved.
Theme Jasmine by Kent Liao
友情链接：知新网