update vue book

Author: 2xiao

src/vue/11.md

@@ -14,7 +14,7 @@ export const Fragment = Symbol('Fragment');
 ## 1.文本类型
 
 ```ts
-render(h(Text, 'jw handsome'), document.getElementById('app'));
+render(h(Text, 'erxiao handsome'), document.getElementById('app'));
 ```
 
 ```ts
@@ -61,7 +61,7 @@ const processText = (n1, n2, container) => {
 
 ```ts
 render(
-	h(Fragment, [h(Text, 'hello'), h(Text, 'jw')]),
+	h(Fragment, [h(Text, 'hello'), h(Text, 'erxiao')]),
 	document.getElementById('app')
 );
 ```

src/vue/12.md

@@ -10,7 +10,7 @@ const VueComponent = {
 		return { age: 13 };
 	},
 	render() {
-		return h('p', [h(Text, "I'm Jiang sir"), h('span', this.age)]);
+		return h('p', [h(Text, "I'm erxiao sir"), h('span', this.age)]);
 	}
 };
 render(h(VueComponent), document.getElementById('app'));
@@ -137,7 +137,7 @@ import { render, h, Text, Fragment } from './runtime-dom.js';
 
 const VueComponent = {
 	data() {
-		return { name: 'jw', age: 30 };
+		return { name: 'erxiao', age: 30 };
 	},
 	props: {
 		address: String
@@ -367,7 +367,7 @@ const My = {
 };
 const VueComponent = {
 	data() {
-		return { name: 'jw', age: 30, flag: false };
+		return { name: 'erxiao', age: 30, flag: false };
 	},
 	render() {
 		return h(Fragment, [

src/vue/13.md

@@ -21,7 +21,7 @@ const VueComponent = {
 		address: String
 	},
 	setup(props) {
-		const name = ref('jw');
+		const name = ref('erxiao');
 		return {
 			name,
 			address: props.address

src/vue/14.md

@@ -4,7 +4,7 @@
 const functionalComponent = (props) => {
 	return h('div', 'hello' + props.name);
 };
-render(h(functionalComponent, { name: 'jw' }), app);
+render(h(functionalComponent, { name: 'erxiao' }), app);
 ```
 
 函数式组件本质就是一个函数，函数的返回值就是虚拟 DOM。 在 Vue 3 中，所有的函数式组件都是用普通函数创建的。换句话说，不需要定义 `{ functional: true }` 组件选项。

src/vue/15.md

@@ -14,10 +14,10 @@ const My = {
 };
 const VueComponent = {
 	setup() {
-		const state = reactive({ name: 'mrs jiang' });
+		const state = reactive({ name: 'mrs erxiao' });
 		provide('name', state.name);
 		setTimeout(() => {
-			state.name = 'jw';
+			state.name = 'erxiao';
 		}, 1000);
 		return () => h(My);
 	}

src/vue/20.md

@@ -13,7 +13,7 @@ let asyncComponent = defineAsyncComponent(() => {
 	return new Promise((resolve, reject) => {
 		setTimeout(() => {
 			resolve({
-				render: () => h('div', 'hi jiang')
+				render: () => h('div', 'hi erxiao')
 			});
 		}, 1000);
 	});
@@ -47,7 +47,7 @@ let asyncComponent = defineAsyncComponent({
 			setTimeout(() => {
 				resolve({
 					render() {
-						return h('div', 'hi jiang');
+						return h('div', 'hi erxiao');
 					}
 				});
 			}, 1000);
@@ -106,7 +106,7 @@ let asyncComponent = defineAsyncComponent({
 			setTimeout(() => {
 				resolve({
 					render() {
-						return h('div', 'hi jiang');
+						return h('div', 'hi erxiao');
 					}
 				});
 			}, 3000);
@@ -168,7 +168,7 @@ let asyncComponent = defineAsyncComponent({
 			setTimeout(() => {
 				reject({
 					render() {
-						return h('div', 'hi jiang');
+						return h('div', 'hi erxiao');
 					}
 				});
 			}, 3000);

src/vue/21.md

@@ -48,7 +48,7 @@ return function render(_ctx, _cache, $props, $setup, $data, $options) {
 ```ts
 const VueComponent = {
 	setup() {
-		let state = reactive({ name: 'jw' });
+		let state = reactive({ name: 'erxiao' });
 		setTimeout(() => {
 			state.name = 'xx';
 		}, 1000);

src/vue/24.md

@@ -58,7 +58,7 @@ export function compile(template) {
 ## 2.生成文本代码
 
 ```ts
-let r = compile('hello, jw');
+let r = compile('hello, erxiao');
 ```
 
 > 如果仅仅是文本直接返回即可~

src/vue/4.md

@@ -13,7 +13,7 @@ pnpm install @vue/reactivity -w
 		reactive,
 		effect
 	} from '/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js';
-	const state = reactive({ name: 'jw', age: 30 });
+	const state = reactive({ name: 'erxiao', age: 30 });
 	effect(() => {
 		// 副作用函数 默认执行一次，响应式数据变化后再次执行
 		app.innerHTML = state.name + '今年' + state.age + '岁了';
@@ -91,7 +91,7 @@ function createReactiveObject(target: object, isReadonly: boolean) {
 
 ```ts
 let person = {
-	name: 'jw',
+	name: 'erxiao',
 	get aliasName() {
 		return '**' + this.name + '**';
 	}
@@ -277,7 +277,7 @@ export function triggerEffects(dep) {
 在渲染时我们要避免副作用函数产生的遗留
 
 ```ts
-const state = reactive({ flag: true, name: 'jw', age: 30 });
+const state = reactive({ flag: true, name: 'erxiao', age: 30 });
 effect(() => {
 	// 副作用函数 (effect执行渲染了页面)
 	console.log('render');

src/vue/5.md

@@ -5,7 +5,7 @@ proxy 代理的目标必须是非原始值，所以 reactive 不支持原始值
 ```typescript
 const flag = ref(false);
 effect(() => {
-	document.body.innerHTML = flag.value ? 30 : '姜文';
+	document.body.innerHTML = flag.value ? 30 : 'erxiao';
 });
 setTimeout(() => {
 	flag.value = true;
@@ -72,7 +72,7 @@ export function triggerRefValue(ref) {
 响应式丢失问题
 
 ```typescript
-const state = reactive({ name: 'jw', age: 30 });
+const state = reactive({ name: 'erxiao', age: 30 });
 let person = { ...state };
 effect(() => {
 	document.body.innerHTML = person.name + '今年' + person.age + '岁了';

src/vue/6.md

@@ -8,7 +8,7 @@
 
 ```typescript
 import { reactive, effect, computed } from './reactivity.js';
-const state = reactive({ flag: true, name: 'jw', age: 30 });
+const state = reactive({ flag: true, name: 'erxiao', age: 30 });
 const aliasName = computed((oldValue) => {
 	console.log('computed-run', oldValue);
 	return '**' + state.name + '**';
@@ -20,7 +20,7 @@ const runner = effect(() => {
 	console.log(aliasName.value);
 });
 setTimeout(() => {
-	state.name = 'Handsome Jiang';
+	state.name = 'Handsome erxiao';
 }, 1000);
 ```
 

src/vue/7.md

@@ -117,7 +117,7 @@ function doWatch(source, cb, { deep, immediate }) {
 > 连续触发 watch 时需要清理之前的 watch 操作
 
 ```typescript
-const state = reactive({ flag: true, name: 'jw', age: 30 });
+const state = reactive({ flag: true, name: 'erxiao', age: 30 });
 let i = 2000;
 function getData(timer) {
 	return new Promise((resolve, reject) => {
@@ -189,10 +189,10 @@ stop() {
 > 我们可以使用响应性属性编写一个方法，**每当它们的任何值更新时**，我们的方法就会重新运行。**`watchEffect`在初始化时也会立即运行**
 
 ```typescript
-const state = reactive({ flag: true, name: 'jw', age: 30 });
+const state = reactive({ flag: true, name: 'erxiao', age: 30 });
 watchEffect(() => (app.innerHTML = state.name));
 setTimeout(() => {
-	state.name = 'Mr Jiang';
+	state.name = 'Mr erxiao';
 }, 1000);
 
 export function watch(source, cb, options) {

src/vue/9.md

@@ -112,7 +112,7 @@ export function h(type, propsOrChildren?, children?) {
 		} else if (l === 3 && isVNode(children)) {
 			children = [children]; // 儿子是元素将其包装成 h('div',null,[h('span')])
 		}
-		return createVNode(type, propsOrChildren, children); // h('div',null,'jw')
+		return createVNode(type, propsOrChildren, children); // h('div',null,'erxiao')
 	}
 }
 // 注意子节点是：数组、文本、null