XIAOSUO 记录个人学习的足迹

摘要：阅读vue(2.6)的源码，data响应式大概有如下4个过程： 数据代理：core/instance/state.js---vue函数---initMixin---initState---数据遍历---observer/index.js---Observer--- defineReactive---defineProperty 数据装载：$mount---装载template---compileToFunctions---mountComponet---创建【渲染Watcher】---Watcher.get()---Watcher.get()依赖收集---Dep.target就是当前的Watcher（data中的属性—dep-----watcher 形成双向引用） 数据相应式：需要修改data属性---触发setter回调执行---通知dep上的watcher更新dep.notify()---遍历所有的watcher并调用watcher的update方法---调用run方法---调用get()方法实现页面渲染 数据渲染：vm.__patch__---createPatchFunction---patchVnode---双方都有孩子节点updateChildrendiff代理 以下我们参考vue的源码，记录实现data响应式的全过程 一、数据劫持 收先我们混入一个方法，给Vue对象添加一个内部_init方法，我们在这个内部方法中去实现需要的功能 //index.js import { initMixin } from ./init; function Vue(options){ // vue2 配置项 console.log(my vue 6666) this._init(options); // vue 内部约定 私有的方法或属性 一般是以 $ _ 开头 } initMixin(Vue); // 一执行，Vue就有_init方法 export default Vue //init.js 初始化 import { initState } from ./state; // 混入 类似于 对象语言的继承 // 在不改变这个函数的前提下，给这个函数增加方法 增强功能 // 原理是在prototype上添加方…… 阅读全文

摘要：一、Vue3项目搭建 Node.js：是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O 模型，让JavaScript 运行在服务端的开发平台； 版本要求=12.0.0; npm：Nodejs下的包管理器；版本要求 6.x yarn：包管理器； yarn 包管理器是 npm 的一个替代方案，由Facebook于2016年10月发布。 Vite：是一个 web 开发构建工具，使用 Vite 可以快速构建 VUE 项目比webpack打包更加快速 快速的冷启动 即时的模块热更新 真正的按需编译 创建vite3项目：npm init vite，输入项目名称 安装依赖 cd vite-project 进入项目 依赖安装 npm install 或 cnmp i 运行vite项目：npm run dev 访问：http://localhost:5173 包管理工具Yarn的使用 yarn create vite：输入项目名称 cd vite-d2 安装依赖：yarn 项目启动：yarn dev 二、Vue3.2新特性 1. createApp 在 Vue 3 中，改变全局 Vue 行为的 API 现在被移动到了由新的 createApp 方法所创建的应用实例上。 import { createApp } from 'vue' const app = createApp({}) 该实例提供了一个应用上下文，由于 createApp 方法返回应用实例本身，因此可以在其后链式调用其它方法 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App); app.use(store) app.use(router) app.mount('#app'); //合并之后的代码： createApp(App).use(store).use(router).mount('#app') 2. setup函数 setup函数是vue3中专门为组件提供的新属性。 创建组件实例，然后初…… 阅读全文

摘要：TypeScript 是一种由微软开发的自由开源的编程语言，他是JavaScript的一个超集，扩展了JavaScript的 语法，主要提供了类型系统和对 ES6 的支持。 一、类型定义 window.onload=function(){ //类型系统 let flag:boolean = false; //布尔类型 let num:number = 15; //数值类型 let str:string = 'abc'; //字符串类型 let str2:string=`hello,${str}`; let msg:string = `hello,${str},${num}`; let u: undefined = undefined; let n: null = null; //为什么要TS // function sum(n1:number,n2:number){ // return n1+n2 // }; // sum(10,20); // sum('10',20); let count:number = 10; count = 100; //声明的变量有多种类型——联合类型 let id:number | string = 10; id = '111'; //任意类型 :any 万能类型 let x:any = true; x = 111; x = 'abc'; //引用类型 //数组 let arr:number[] = [1,2,3,4,5]; //最简单的方法是使用「类型 + 方括号」来表示数组： number[] let arr2:string[] = ['a','b','hello']; let arr3:(number|string)[] = ['a',100,'hello']; let arr4:any[] = ['a',100,'hello']; //数组泛型 Array类型 let arr5:Arraynumber= [1,2,3,4,5]; let …… 阅读全文

摘要：一、let与const let用来声明变量，它的用法类似于 var 不存在变量提升 同一个作用域内不能重复定义同一个名称 有着严格的作用域 const 声明一个只读的常量。一旦声明，常量的值就不能改变。 保持let的不存在变量提升，同一个作用域内不能重复定义同一个名称，有着严格的作用域 const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动 window.onload = function () { // let 和var的不同 // 1、不存在变量提升 // console.log(a); // var a = 100; // //解析过程 // //预解析 // var a; // //逐行解析 // console.log(a); // a = 100; // // // console.log(a); //Cannot access 'a' before initialization // let a = 100; //2、同一个作用域内不能重复定义同一个名称 // var a = 10; // var a = 100; // console.log(a); //100 // var a = 10; // let a = 100; // console.log(a); //Identifier 'a' has already been declared // let a = 10; // let a = 100; // let a = 10; // a = 100; // console.log(a); //100 //3、有着严格的作用域 // function fn(){ // var a = 'a'; // if(true){ //块级作用域 // let a = 'b' // }; // console.log(a) //'a' // }; // fn(); …… 阅读全文

摘要：一、JS数据结构 js的数据定义与检查 var str = 'abc'; var num = 123; var bool = true; var und = undefined; var n = null; var arr=['x','y','z']; var obj = {}; var fun = function() {}; console.log(typeof str); //string console.log(typeof num); //number console.log(typeof bool); //boolean console.log(typeof und); //undefined console.log(typeof n); //object console.log(typeof arr); //object console.log(typeof obj); //object console.log(typeof fun); //function 1. 字符串 window.onload = function () { // 字符串常用的属性和方法 // charAt() 方法可返回指定位置的字符。 // concat() 方法用于连接两个或多个字符串。 // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 // lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置 // includes() 方法用于判断字符串是否包含指定的子字符串 // replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串 // split() 方法用于把一个字符串分割成字符串数组 // substr() 方法可在字符串中抽取从开始下标开始的指定数目的字符 // substring() 方法用于提取字符串中介于两个指定下标之间的字符 // slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分 // toLowerCase() 方法用于把字符串转换为小写 // toUpperCase() 方法用于把字…… 阅读全文