- 博客(39)
- 收藏
- 关注
RSS订阅原创 Vue3 — Composition API(其它部分二)
# toRef为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的区别ref: 拷贝了一份新的数据值单独操作, 更新时相互不影响应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用<template> <h3>state:{{ state }}</h3> <h3>age:{{ age }}</h3> <h3>money:{{ mon
2022-05-29 17:51:45
142
原创 Vue3 — Composition API(其它部分一)
# shallowReactive 与 shallowRefshallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)shallowRef: 只处理了value的响应式, 不进行对象的reactive处理什么时候用浅响应式呢?一般情况下使用ref和reactive即可，都是深度响应式如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive如果有一个对象数据, 后面会产生新的对象来替换 ===> s
2022-05-28 19:44:43
129
原创 Vue3 — toRefs、ref
toRefs把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用问题: reactive 对象取出的所有属性值都是非响应式的解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性return的内容使用”…“扩展运算符时，即使使用reactive定义的对象，也不是响应式<
2022-05-28 16:01:20
391
原创 Vue3 — 自定义hook函数
自定义hook函数使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂需求1: 收集用户鼠标点击的页面坐标普通写法：只能在该组件中使用<template> <h2>x:{{x}}, y:{{y}}</h2></template><script lang="ts">import { defineComponen
2022-05-19 19:06:14
551
原创 Vue2 与 Vue3生命周期对比
Vue2 与 Vue3生命周期对比1. Vue2.x2. vu3.x3. 与 2.x 版本生命周期相对应的组合式 APIbeforeCreate -> 使用 setup()created -> 使用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy ->
2022-05-17 14:41:32
184
原创 Vue3 — 计算属性与监视
计算属性与监视computed函数:computed是一个函数传入一个回调函数，只有getter传入一个对象有getter和setter返回值为一个Ref对象watch函数监听单个数据时，第一个为要监听的数据，第二个回调函数，第三个参数为对象{immediate, deep}监听多个数据(响应式的不需要箭头函数，非响应式需要)，第一个参数为数组[()=>val1, ()=>val2, …]，第二个为回调函数监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执
2022-05-17 13:46:57
308
原创 Vue3 — setup、reactive与ref细节
setup细节setup执行的时机在beforeCreate之前执行(一次), 此时组件对象还没有创建this是undefined, 不能通过this来访问data/computed/methods / props其实所有的composition API相关回调函数中也都不可以<template> <h1>父组件-----</h1> <h3>{{ msg }}</h3> <button @click="m
2022-05-14 19:29:17
734
原创 vue2响应式与vue3响应式的区别
Vue2 的响应式核心:对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持 Object.defineProperty(object, 'count', { get () {}, set () {} })问题对象直接新添加的属性或删除已有属性, 界面不会自动更新直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}
2022-05-14 15:44:14
86
原创 Vue3 — setup、ref、 reactive基本使用
常用API一、setup类型：setup 函数是一个新的组件选项。它作为在组件内部使用组合式 API 的入口点调用时间在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。模板使用：函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用<template> <h1>{{num}}</h1></template><script lang
2022-05-14 13:34:31
887
原创 Vue3 — 初识
初识Vue3一、了解相关信息Vue.js 3.0 “One Piece” 正式版在2020年9月份发布2年多开发, 100+位贡献者, 2600+次提交, 600+次PRVue3支持vue2的大多数特性更好的支持Typescript二、使用Vue3通过 CDN：通过 Codepen的浏览器 playground脚手架 Vite：npm init vite-app hello-vue3脚手架 vue-cli：npm install -g @vue/cli # OR
2022-05-14 09:05:47
340
原创 React - review 2
React - review 2一、虚拟DOM一、虚拟DOM虚拟 DOM 就是一个 Js 对象，比较 Js 对象不怎么消耗性能，比较真实 DOM 消耗性能数据更新，视图重新渲染第一种state 数据JSX 模板数据 + 模板 结合，生成真实的DOM，来显示state 发生改变数据 + 模板 结合，生成真实的DOM，替换原始的 DOM 缺陷：第一次生成了完整的 DOM 碎片，第二次依然生成了完整的 DOM
2022-02-05 17:11:03
591
原创 React - review 1
React - review 1一、 React 简介二、 React 开发环境准备三、 React 工程目录文件简介四、React 中的组件五、Jsx 语法需要注意六、围绕 React 衍生出来的思考七、propTypes 与 DefaultProps 的应用八、props、state 与 render 函数一、 React 简介React Js => 可以用 React 的语法来编写一些网页的交互效果React Native => 可以让我们借用 React 语法编写原生的 app
2022-02-04 19:21:19
453
转载 CSS预编译
一、什么是CSS预编译？ CSS 预编译，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。二、为什么要使用CSS预编译？CSS缺点：语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；没有变量和
2021-12-27 12:32:32
1393
原创 react（十六）-- react-redux II
Form案例重构（reducer 合并）- 单组件在项目文件夹下的 src 文件夹下的 store文件夹下建立 reducer文件夹 以及 action文件夹结构如下：// App.jsimport { Component } from "react";import store from "./store";import {connect, Provider} from 'react-redux'import {nameAction, ageAction, commitActio.
2021-11-28 11:29:34
272
原创 react（十五）-- promise（面试）
以下代码，打印结果为：setTimeout(() => { console.log(1);}, 0)Promise.resolve().then(()=>{ console.log(2);})Promise.resolve().then(()=>{ console.log(3);})console.log(4);分析：01 先同步后异步setTimeout 与 Promise里面的回调函数都是异步的console.log(4);.
2021-11-05 13:58:17
124
原创 react（十四）-- react-redux
react-redux 简介01 redux-react为了方便使用，redux 的作者封装了一个 react 专用的库 react-reduxredux 可以和 vue、react 等前端库配合使用，react-redux 只能和 react 配合react-redux 将所有组件分成两大类：UI组件 和 容器组件02 UI组件只负责UI组件的呈现，不带任何业务逻辑没有状态（即不使用 this.state 这个变量）所有数据都由参数（this.props）提供不适应任何 .
2021-11-05 12:45:53
74
原创 数据结构与算法（二）链表练习题
快乐数编写一个算法来判断一个数 n 是不是快乐数。「快乐数」定义为：对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1，也可能是 无限循环 但始终变不到 1。如果 可以变为 1，那么这个数就是快乐数。如果 n 是快乐数就返回 true ；不是，则返回 false 。分析：如果是快乐数：19 82 68 100 1如果不是快乐数3 9 81 65 61 37 58 89 145 42 20 4 16 37 58 89 .
2021-11-04 22:38:48
107
原创 react（十三）redux
redux 简介01 redux学习参考英文文档：https://redux.js.org/Github：https://github.com/reactjs/redux02 redux 需求组件视图需求组件通信需求大型应用需求03 组件通信分析04 redux 是什么redux 是一个js库，一个状态容器作用：集中式管理react应用中多个组件共享的状态05 redux 工作流程06 redux 关键功能解析ActionCreator.
2021-11-04 12:41:13
72
原创 react（十二）-- 环境搭建 与 组件化开发
creat-react-app组件化概念小组件：每个小组件都包含自己的逻辑和样式大组件：多个独立的小组件能直接组合成大组件页面组件：将这些独立的大组件组合成一个复杂的页面应用组件：根组件由多个页面组件组合成应用组件，形成完整的组件树主要特点：可组合：小组件 - 大组件 - 页面组件 - 应用组件可重用：每个组件都是具有独立逻辑和样式，可被复用到不同组件中可维护：每个组件都是具有独立逻辑和样式，更容易维护搭建环境01 全局环境安装脚手架 npm install
2021-11-03 20:02:35
161
原创 数据结构与算法（一）链表
一、数据 结构什么是数据结构？计算机 存储数据的一种方式数据结构典型的类型集合：同属于一个集合线性：一对一的相互关系树形：一对多的相互关系图形：多对多的相互关系常见的数据结构栈队列数组链表树图堆… …二、算法查找、插入、删除、修改、排序 … …三、链表1.建立链表代码如下：第一种方式#include<iostream>using namespace std;//1.定义一个结构体struct Node { Nod
2021-11-02 23:07:50
114
原创 react（十一）-- react 高级
react - highfragment01<script type="text/babel"> class Table extends React.Component { render() { return ( <table> <tr> <td>你好</td>
2021-11-02 14:31:55
131
原创 react（九）-- 组件通信 -- context-使用
context-使用案例：点击按钮，切换主题颜色<script type='text/babel'> class App extends React.Component { state = {theme:"green"} handleClick = () => { this.setState({ theme: "red" }) }
2021-10-29 22:03:54
80
原创 react（八）-- 组件通信案例
component-communication-tasks原型 - 保真图 - 静态页面（html js css） - react component（一个大组件： 视图 、数据、 行为） - 组件拆分react components (多个组件)一个组件-tasks步骤：视图：页面显示 页面重构数据：state行为：添加 删除<!DOCTYPE html><html lang="en"><head> <meta ch
2021-10-28 11:18:09
98
原创 react（七）-- communication
compontent - communication单向数据源1.组件数据源：state / propsprops 是 组件的对外接口上层组件props ：数据（计算出来的结果/上一层组件的props/组件自身维护的状态state）和 方法（传递给下一层组件）state 是 组件的对内接口对内使用，私有的；每个组件都在维护自己的私有状态2.视图层变化依据：props 和 state ，它们变化，react机制会重新计算，进而重新渲染单向数据流数据流动：父 - > 子（子
2021-10-23 17:00:38
99
原创 react（六）-- ref
component - ref时钟案例（1）受控组件<script type="text/babel"> //受控组件 class Clock extends React.Component { state = { time : new Date().toLocaleTimeString() } render() { return ( <div>
2021-10-23 13:50:45
132
原创 react（五）-- state-form
component-ref1. 受控组件 外来数据props/自己维护的状态state发生改变的时候，会导致组件的视图重新渲染，页面发生改变；这种组件受状态和属性变化的控制，称之为受控组件。 特点：数据驱动（数据更新，页面就跟着更新），不用直接操作DOM。2. 不受控组件 &nb
2021-10-20 20:46:26
338
原创 react（四）-- render
component-renderif + 组件(1)函数组件 => 函数组件也叫UI组件、简单组件 (2)<script type="text/babel"> //if + 组件 //(1)函数组件 => 函数组件也叫UI组件、简单组件 function Welcome(props){ return <h1>Welc
2021-10-12 23:38:52
261
原创 react（三）-- 类组件
component - class知识回顾（类的继承）01 super(props) super有参数 class A{ constructor(n){ //this指向B的实例 this.x = n } } class B extends A{ constructor(props){ super(
2021-10-05 23:57:43
388
原创 react（二）-- 函数组件
一、component-function函数组件的定义 function Welcome(){ return <h1>Hello World</h1> } const e = <Welcome></Welcome> ReactDOM.render(e,document.getElementById("app"));函数组件传值*注意：不能把props直接放在{}中使用，会报错 function
2021-10-02 23:24:06
238
原创 react（一）-- jsx-element
一、初识react什么是react？A JavaScript library for building user interfaces— 是构建用户界面（视图层）的javascript库— 不是一个框架，react全家桶是一个框架理念：Learn Once, Write Anywhere—react-dom =>web页面—react-native =>anroid/ios（移动端开发）—…核心思想All in js 关注点分离...
2021-09-30 09:14:01
1300
原创 Vue.js学习
Vue.js一、Vue.js的介绍1.Vue是什么？主流的渐进式 JavaScript 框架2. 什么是渐进式 ？我们可以简单的理解为，用自己想用或者能用的功能特性，不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用Vue了么？当然不是，如果你只是使用Vue做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引
2021-07-31 20:15:33
112
原创 2021-07-31（测试--总结 上）
1、以下会打印：（C）new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) }})A、1,2 B、2 C、1 D、2,1解析：mounted是挂载后，题中并未挂载2、Vuex的五种属性state, getters, mutations, actio
2021-07-31 20:08:19
1316
转载 jQuery复习01
6.1一、初识jQueryjQuery是什么？引用自：http://m.php.cn/article/414381.html（1）jQuery是一个快速而简洁的JavaScript库，由John Resig在2006年创建，其中有一个很好的座右铭：写得少，做得更多。jQuery简化了HTML文档遍历，事件处理，动画和Ajax交互，以实现快速Web开发。jQuery是一个JavaScript工具包，旨在通过编写更少的代码来简化各种任务。（2）以下是jQuery支持的重要核心功能列表DOM操
2021-06-01 23:08:49
70
转载 Node.js 模板引擎
模板引擎一、什么是模板引擎？模板引擎是第三方模块，是一个将页面模板和要显示的数据结合生成HTML页面的工具让开发者以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。二、art-template模板引擎1.使用：在命令行工具中使用npm install are-template安装使用const template = require(‘art-template’)引入模板引擎需要创建两个文件，一个js文件，一个art文件告诉模板引擎要拼接的数据和模板在哪const html = t
2021-05-06 23:01:11
473
转载 Node.js 学习
Node.js 学习所有联网的程序都需要进行网络通信；计算机中只有一个物理网卡，而且同一个局域网中，网卡的地址，必须是唯一的；网卡是通过唯一的IP地址来进行定位的；IP地址用来定位计算机，端口号用来定位具体的应用程序（所有需要联网通信的的软件都必须具有端口号）；端口号的范围从0~65536之间；在一台计算机中，同一端口号在同一时间只能被一个程序占用；在服务器默认发送的数据，其实是utf8编码的内容，但是浏览器不知道是utf8编码的内容，它会按照当前操作系统的默认编码
2021-05-06 15:24:48
41
转载 Nodejs fs模块
fs模块 =>>File System(文件系统)一、什么是fs模块？fs模块是⽂件操作模块。fs是 FileSystem的简写。它⽤来对⽂件，⽂件夹进⾏操作。fs模块中操作⽂件(或者⽂件夹)的⽅法，⼤多都提供了两种选择：同步版本的：同步文件系统会阻塞程序的执行，也就是说，除非操作完毕，否则不会向下执行代码异步版本的：异步文件系统不会阻塞程序的执行，而是操作完成时，通过回调函数将结果返回，性能更好二、fs的使用1.文件的写入同步：（1）fs.openSync(path
2021-05-04 10:50:39
318
转载 Nodejs Buffer缓冲区
Buffer(缓冲区）一、Buffer?JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库。Buffer 库为 Node.js 带来了一种存储原始数据的方法，可以让 Node.js 处理二进制数据，每当需要在 Node.js 中处理I/O操作中移动的数据时
2021-05-03 19:25:18
129
转载 Nodejs学习 5.3
一、命令行窗口常用的指令：dir 列出当前目录下的所以文件cd 目录名 进入到指定的目录md 目录名 创建一个文件夹rd 目录名 删除一个文件夹目录:. 表示当前目录. .表示上一级目录环境变量（windows系统中的变量）path当我们在命令行窗口打开一个文件时，系统会在当前目录下寻找，找不到会到环境变量path的路径中寻找如果我们把某一文件的路径添加到path路径中，就可以在任意位置访问了二、进程和线程进程：进程负责为程序的运行提供必备的环境进
2021-05-03 16:19:06
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人