let regx = /xyz/;

let regx = new RegExp("xyz");

let regx = /xyz/g;
//等价于
let regx = new RegExp("xyz", "g");

/cat/.test("cats and dogs"); // true

let r = /z/g;
let s = "_z_z";

r.test(s); //true,(从第一个_z前面开始)
r.test(s); //true,(从第二个_z前面开始)
r.test(s); //false,(从第二个_z后面开始)

new RegExp("").test("abc"); //true

let s = "_X_X";
let r1 = /x/;
let r2 = /y/;

r1.exec(s); //["x"]
r2.exec(s); // null

let s = "_x_x";
let r = /_(x)/;
r.exec(s); //["_x", "x"]

let s = "_x_x";
let r1 = /x/;
let r2 = /y/;
s.match(r1); //["x"}
s.match(r2); //

let s = "abba";
let r = /a/g;
s.match(r); //["a","a"]
s.exec(r); //["a"]

'_x_x'search(/x/); //1

str.replace(search, replacement);

let str = "aaa";
str.replace(a, b); //"baa"
str.replace(/a/, b); //"baa"
str.replace(/a/g, b); //"bbb"

let str = "     #id div.class   ";
str.replace(/^\s+|\s+$/g, "");
//#id div.class

let str = "abc";
str.replace("b", "[$`-$&-$']");
//"a[a-b-c]c"

// 非正则分隔
"a,  b,c, d".split(",");
// [ 'a', '  b', 'c', ' d' ]

// 正则分隔，去除多余的空格
"a,  b,c, d".split(/, */);
// [ 'a', 'b', 'c', 'd' ]

// 指定返回数组的最大成员
"a,  b,c, d".split(/, */, 2);
//[ 'a', 'b' ]

// 例一
"aaa*a*".split(/a*/);
// [ '', '*', '*' ]

// 例二
"aaa**a*".split(/a*/);
// ["", "*", "*", "*"]

"aaa*a*".split(/(a*)/);
// [ '', 'aaa', '*', 'a', '*' ]

/c.t/;

^ 表示字符串的开始位置
$ 表示字符串的结束位置
\b 单词边界的位置
\B 非单词边界的位置
x(?=p) x后面的字符与p匹配时匹配x，即匹配p前面的位置
  		比如对于/Jack(?=Sprat)/，“Jack”在跟有“Sprat”的情况下才会得到匹配．
x(?!p) x后面的字符不与p匹配时匹配x，即匹配非p前面的位置
(?<=p)x x前面的字符与p匹配时匹配x，即匹配p后面的位置
  			例如，对于/(?<=Jack)Sprat/，“Sprat”紧随“Jack”时才会得到匹配。
(?<!p)x x前面的字符不与p匹配时匹配x，即匹配非p后面的位置

// 在字符串首尾（即^和$）处插入“#”
"javascript css html".replace(/^|$/g, "#"); // "#javascript css html#"

// 在单词边界（即\b）处插入“#”
"javascript css html".replace(/\b/g, "#"); // "#javascript# #css# #html#"
// 非单词边界（即\B）处插入“#”
"javascript css html".replace(/\B/g, "#"); // "j#a#v#a#s#c#r#i#p#t c#s#s h#t#m#l"

// 在空格前的位置插入“#”
"javascript css html".replace(/(?=\s)/g, "#"); // "javascript# css# html"
// 在非空格前的位置插入“#”
"javascript css html".replace(/(?!\s)/g, "#"); // "#j#a#v#a#s#c#r#i#p#t #c#s#s #h#t#m#l#"

// 在空格后的位置插入“#”
"javascript css html".replace(/(?<=\s)/g, "#"); // "javascript #css #html"
// 在非空格后的位置插入“#”
"javascript css html".replace(/(?<!\s)/g, "#"); // "#j#a#v#a#s#c#r#i#p#t# c#s#s# h#t#m#l#"

num = s.match(/\d*(\,\d+)*(\.\d+)?/g)[0].replace(/\,/gi, "");
//匹配带千分位的金额,并以正常字符串输出

x{m,n}	x出现的次数为m-n次
x{m,}	x至少出现m次
x{m}	x出现m次，相当于{m,m}
x?	x出现0或1次，相当于{0,1}
x+	x出现1或多次，相当于{1,}
x*	x出现0或多次，相当于{0,}

const regExp = /a{2,4}bc/;
regExp.test("aaabc"); // true
regExp.test("aabc"); // true
regExp.test("abc"); // false

x{m,n}?	x出现的次数m-n次
x{m,}?	x至少出现m次
x??	x出现0或1次，相当于{0,1}
x+?	x出现1或多次，相当于{1,}
x*?	x出现0或多次，相当于{0,}

"aaa".match(/a+/);
// ["aaa", index: 0, input: "aaa", groups: undefined]

"aaa".match(/a+?/);
// ["a", index: 0, input: "aaa", groups: undefined]

const SetArr = new Set();

[1,1,2,2,3,3].forEach(item=>SetArr.add(item));
console.log(SetArr);

=>
0: 1
1: 2
2: 3
size: 3
__proto__: Set

let s = new Set([1, 2, 3, 4, 5]);
s.forEach((item) => console.log(item + 1));
//2 3 4 5 6

let s = new Set(["a", "b", "c"]);
for (let item of s.entries()) {
  console.log(item);
}
//(2) ["a", "a"]
//(2) ["b", "b"]
//(2) ["c", "c"]

let s = new Set(["a", "b", "c"]);
for (let item of s.values()) {
  console.log(item);
}
//a b c

let s = new Set(["a", "b", "c"]);
for (let item of s.keys()) {
  console.log(item);
}
//a b c

let a = new Set([1, 2, 3, 4]);
let b = new Set([3, 4, 5, 6]);

//交集
let value = new Set([...a].filter((item) => b.has(item)));
//并集
let value2 = new Set([...a], [...b]);
//差集
let value3 = new Set([...a].filter((item) => !b.has(item)));

let map = new Map();
let obj = { name: "alan", age: 20 };
map.set(obj, "这是一些描述");
map.get(obj);
console.log(map);

let person = new Map([
  ["name", "alan"],
  ["age", "20"],
]);
for (let item of person.keys()) {
  console.log(item);
}
//name
//age

let person = new Map([
  ["name", "alan"],
  ["age", "20"],
]);
for (let item of person.values()) {
  console.log(item);
}
//alan
//20

let person = new Map([
  ["name", "alan"],
  ["age", "20"],
]);
console.log(...person);

let arr = [
  ["name", "alan"],
  ["age", "20"],
];
let m = new Map(arr);

let person = new Map([
  ["name", "alan"],
  ["age", "20"],
]);
function swap(map) {
  let obj = Object.create(null);
  for (let [key, value] of map) {
    obj[key] = value;
  }
  return obj;
}
swap(person);
//{name: "allan", age: "20"}

let person = { name: "allen", age: "20" };
function swap(obj) {
  for (let key of Object.keys(obj)) {
    map.set(key, obj[key]);
  }
  return map;
}
swap(person);

// AMD
define(["./a", "./b"], function (a, b) {
  // 加载模块完毕可以使用
  a.do();
  b.do();
});
// CMD
define(function (require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require("./a");
  a.doSomething();
});

// a.js
module.exports = {
  a: 1,
};
// or
exports.a = 1;

// b.js
var module = require("./a.js");
module.a; // -> log 1

var module = require("./a.js");
module.a;
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
  a: 1,
};
// module 基本实现
var module = {
  id: "xxxx", // 我总得知道怎么去找到他吧
  exports: {}, // exports 就是个空对象
};
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports;
var load = function (module) {
  // 导出的东西
  var a = 1;
  module.exports = a;
  return module.exports;
};
// 然后当我 require 的时候去找到独特的
// id，然后将要使用的东西用立即执行函数包装下，over

class Point {
  // ...
}

typeof Point; // "function"
Point === Point.prototype.constructor; // true

class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

class A {}

class B extends A {
  constructor() {
    super();
  }
}

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

class Person {
  // private 私有,仅在类内使用
  private name:string = 'Tom';
  // public 公共,内外都可以使用
  public age: number = 10;
  // protected 可在类内和继承的子类中调用
  protected sex: string;
  getName() {
    return 'Name'
  }
//constructor中的会在new一个实例时调用,接收传入的参数
  constructor(name: string) {
    this.name = name
  }
}

const person = new Person('dell');//此时调用constructor中的方法
console.log(person.name);

class Teacher extends Person {
  getTeacherName() {
    return 'teacher'
  }
  getName(){
    //super关键字表示父类
   return super.getName()
  }
  constructor(age: number){
    //子类中的constructor要想使用,需要调用父类的constructor
    //super()就表示父类的constructor
    super('dell');
  }
}
const person = new Teacher(123);//此时调用constructor中的方法
console.log(person.name); // 子类继承了父类,并且super()传入'dell',则打印dell
console.log(person.age); // 子类继承了父类,虽然传参123,
// 但是子类的构造函数内没有对应的this赋值给age,则继承父类的age,父类的原型对象上age是10

let p = new Proxy(target, handler)

const obj = {
  name: 'Tom'
}
const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log('劫持的对象名', target)
    console.log('劫持的属性名', key)
    return target[key]
  }
})
proxy.name // "Tom"

const parent = {
  name: 'parent',
  get value() {
    return this.name;
  },
};

const handler = {
get(target, key, receiver) {
return Reflect.get(target, key);
// 这里相当于 return target[key]
},
};

const proxy = new Proxy(parent, handler);

const obj = {
name: 'obj',
};

// 设置 obj 继承与 parent 的代理对象 proxy
Object.setPrototypeOf(obj, proxy);

console.log(obj.value); // parent
// 这里因为返回的是源对象的 value,所以是父级的,想要是继承的,需要加上 receiver

const handler = {
get(target, key, receiver) {
return Reflect.get(target, key, receiver);
// 这里相当于 return target[key].call(receiver)
},
};

````

- Proxy中接受的Receiver形参表示代理对象本身或者继承自代理对象的对象
- Reflect中传递的Receiver实参表示修改执行原始操作时的this指向.(实际上就是指向调用者).

接下来我们通过 Proxy 来实现一个数据响应式
```javascript
let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value, receiver)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2
````

在上述代码中，我们通过自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。

当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要我们在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。

# Reflect

Reflect 提供拦截 JS 操作的方法.并非一个构造函数,不能用 new 进行调用.
它的所有方法和属性都是静态的.

```javascript
Reflect.get(target, key, receiver);
// 也就是Reflect将get操作转发给target,获取key的值,相当于target[key]

// 实现功能
let array = [1, 2, 3];

array[-1]; // 3，最后一个元素
array[-2]; // 2，从末尾开始向前移动一步
array[-3]; // 1，从末尾开始向前移动两步

array = new Proxy(array, {
  get(target, key) {
    // key 是字符串
    key = Number(key);
    if (Number(key) < 0) {
      key = key + target.length;
    }
    return Reflect.get(target, key);
  },
});

const handler = {
  get(target, key){
    let res = Reflect.get(target.key)
    retrun typeof res === 'object' ? new Proxy(res,handler) : res
  },
	set(target, key, val){
    return Reflect.set(target, key, val)
  }
}

function* foo(x) {
  let y = 2 * (yield x + 1);
  let z = yield y / 3;
  return x + y + z;
}
let it = foo(5);
console.log(it.next()); // => {value: 6, done: false}
console.log(it.next(12)); // => {value: 8, done: false}
console.log(it.next(13)); // => {value: 42, done: true}

const p1 = new Promise((reslove,reject)=>{
  setTimeout(()=>{reject(new Error('fail')},3000)
})
const p2 = new Promise((resolve,reject)=>{
  setTimeout(()=>{resolve(p1)},1000)
})
p2.then(result=>console.log(result))
	.catch(err=>console.log(err))

promise
  .then((value) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("Error");
      }, 300);
    });
  })
  .then(
    (value) => {
      console.log(value);
    },
    (reason) => {
      console.log(reason);
    } // 'Error'
    // 默认return 的是undefined
  )
  .then(
    //上一次调用只有失败的状态,而那里默认返回的是undefined,
    //这里在onFulfilled的这里捕获的是上一次失败的默认return的undefined
    (value) => {
      console.log(value);
    }, // 'undefined'
    (reason) => {
      console.log(reason);
    }
  );

// then中throw new Error()的情况
.then(
  (value)=>{throw new Error('Error')
)
.then(
  // 上面抛出的是error,所以要走onRejectd,也就是第二个函数
	(value)=>{console.log(value)},
  (reason)=>{console.log(reason)} // 'Error'
  )

const p1 = Promise.resolve();
p1.then(() => {
  console.log(1);
  throw new Error();
})
  .catch(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  });
// 输出1,2,3
// catch后没有抛出错,则返回的是resolved状态,可以继续then

function loadIMg(src) {
  return new Promise((resolve, reject) => {
    const img = document.createElement("img");
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function () {
      reject(new Error("加载失败"));
    };
    img.src = src;
  });
}
const url1 =
  "https://i1.hdslb.com/bfs/face/f4d60f852eb1a85696447838c90a94acad31b7ae.jpg@160w_160h_1c_1s.webp";
const url2 =
  "https://i0.hdslb.com/bfs/face/a8ef30d6688d0b532bd20baa160417deae8f386d.jpg@240w_240h_1c_1s.webp";
// 连续加载图片
loadImg(url1)
  .then((img) => {
    console.log(img);
    return loadImg(url2);
  })
  .then((img2) => {
    console.log(img2);
  });

let a = 0;
let b = async () => {
  a = a + (await 10);
  console.log("2", a); // -> '2' 10
};
b();
a++;
console.log("1", a); // -> '1' 1
// 先得到'1' 1, 后得到'2' 10

<input id='btn' type='button' value='123' />
<script>
  var value = '456'
	document.getElementById('btn').onclick = function(){
  	console.log(this.value) //打印123
	}
</script>

//构造函数
function Person(name) {
  this.name = name;
}
function newFunc(name) {
  var o = {};
  o.__proto__ = Person.prototype;
  Person.call(o, name);
  return o;
}

function create() {
  let obj = {};
  let Con = [].shift.call(arguments);
  obj.__proto__ = Con.prototype;
  let result = Con.apply(obj, arguments);
  return result instanceof Object ? result : obj;
}

typeof str == "object" &&
  Object.prototype.toString.call(str).toLowerCase() == "[object Object]" &&
  !str.length;

const http = function(...options){
  const { type,
	return new Promise(resolve,reject){
    resolve()
  }catch(){
	reject()
  }
}

//使用reduce
function run(arr, value) {
  return arr.reduce((a, b) => a.then(b), Promise.resolve(value));
}
// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5);
  });
}
// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2);
  });
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
  return a * 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
run(promiseArr, 10).then(console.log);

function a() {
  b();
  if (b === 3) {
    return;
  }
  console.log("a");
}
function b() {
  console.log("b");
  return (b = 2);
}
a();

function configCache(){
	let _cache = new Map()
	return {
      getCache(k){
			return _cache[k]
    },
    setCache(k, v){
      _cache[k] = v
      return this
    },
    removeCache(k){
      delete _cache[k];
      return this
    }
  }
}();

function interval(fn, ms) {
  let set = () => {
    setTimeout(set, ms);
    fn();
  };
  setTimeout(set, ms);
}

//递归
function flat(arr) {
  let res = [];
  let each = function (arr) {
    arr.forEach((item) => {
      if (item instanceof Array) {
        each(item);
      } else {
        res.push(item);
      }
    });
  };
  each(arr);
  return res;
}
let a = [1, [2, 3], [6, [5, 7]], 4];
console.log(flat(a));
//使用reduce
function flat(arr) {
  return arr.reduce((a, b) => {
    return Array.isArray(b) ? [...a, ...flat(b)] : [...a, b];
  }, []);
}
let arr = [1, [2, 3], [6, [5, 7]], 4];
console.log(flat(arr)); // [1, 2, 3, 6, [5, 7], 4],

//转化字符串toString
function flat(arr) {
  return arr
    .toString()
    .split(",")
    .map((item) => +item);
}
let arr = [1, [2, 3], [6, [5, 7]], 4];
console.log(flat(arr));

actions: {
    increment (context) {
      context.commit('increment')
    }
  }
//解构赋值
actions: {
	increment({commit}){
    commit('increment')
  }

// options 上的属性表示附加参数
function setCookie(name, value, options) {
  options = options || {};
  let secure = options.secure,
    path = options.path,
    domain = options.domain,
    expires = options.expires;
  // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
  // ...
}

import store from "@/store/index.js"; //需要引入store
export default {
  data() {
    return {};
  },
  computed: {
    username() {
      return store.state.username;
    },
  },
};

computed: {
  username() {
    return this.$store.state.username
  }
}

store.dispatch('actionA').then(()=>{
  ...
})

//在另一个action中
actions: {
	actionB({ commit, state}){
    return dispatch('actionA').then(()=> {
			commit('someMutation')
    })
  }
}
//使用async/await
  //假设getData()和getOtherData()返回Promise
  actions: {
    async actionA({commit, state}){
      commit('gotData', await getData())
    },
    async actionB({commit, state}){
      await dispatch('actionA') //等待actionA完成
      commit('gotOtherData', await getOtherData())
    }
  }

let payload = {
  username: this.userInfo.username,
  date: new dateFormat().toString("date"),
};
this.getLogList(payload).then(() => this.buildLog());

list: [
  {
    id: 1,
    name: "商品一",
    status: false,
  },
  {
    id: 2,
    name: "商品二",
    status: true,
  },
  {
    id: 3,
    name: "商品三",
    status: false,
  },
  {
    id: 4,
    name: "商品四",
    status: true,
  },
  {
    id: 5,
    name: "商品五",
    status: false,
  },
];

var data = { name: "yck" };
observe(data);
let name = data.name; // -> get value
data.name = "yyy"; // -> change value

function observe(obj) {
  // 判断类型
  if (!obj || typeof obj !== "object") {
    return;
  }
  Object.keys(obj).forEach((key) => {
    defineReactive(obj, key, obj[key]);
  });
}

function defineReactive(obj, key, val) {
  // 递归子属性
  observe(val);
  Object.defineProperty(obj, key, {
    // 可枚举
    enumerable: true,
    // 可配置
    configurable: true,
    // 自定义函数
    get: function reactiveGetter() {
      console.log("get value");
      return val;
    },
    set: function reactiveSetter(newVal) {
      console.log("change value");
      val = newVal;
    },
  });
}

`(${monthLine.label})`;

v-model='value'
//等同于
:value='value'
@input='fatherM=>this.fatherM = value'
//等同于
:fatherM='fatherM'
:value.sync='fatherM=>this.fatherM = value'

//第一种
this.$emit('useMoney',100)
//父组件绑定useMoney事件
<Father @useMoney="useMoney" />
//父级再出发,向上传递

//第二种
this.$parent.$emit('useMoney',100)
//直接触发父级上的useMoney事件,不用再写触发事件的methods

//第三种
//封装方法
//main.js
extendEvent(Vue)
//event.js
export default function(Vue){
	Vue.prototype.$eventDispatch = function(name, value){
		let parent = $parent

    while(parent){
			parent.$emit(name, value)
      parent = parent.$parent
    }
  }

  Vue.prototype.$eventNotice = function(name,value){
  	let bc = children => {
      children.map(c =>{
				c.$emit(name, value)
        if(c.$children){
					bc(C.$children)
        }
      })
    }
    bc(this.$children)
  }
}

this.$nextTick(() => this.$refs[`sub${index}`][0].init());

//bind后的动态参数表达响应式的绑定这个值
<a v-bind:[attr] = "url"></a>
//v-on后面的参数也就是个动态的事件名
<a v-on:[eventName]="doSometing"></a>

<div v=bind:class="{active: idActice, 'text-danger': hasError }"></div>

data : {
 isActive: true,
   hasError: false
}

<div :class="classObject"></div>

data: {
 isActive: true,
 error: null
}
computed: {
	classObiect(){
    return {
    	active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="[activeClass, errorClass]"></div>

data: {
	activeClass: 'active',
  errorClass: 'text-danger'
}

//或者三元表达式
<div :class="[isActive ? activeClass : '', errorClass]"></div>

<div :class="[{ active: isActive }, errorClass]"></div>

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
	activeColor: 'red',
    fontSize: 30
}

<div :style="[activeColor, baseStyle]"></div>

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
	numbers: [1,2,3,4,5]
},
computed: {
	eventNumbers(){
    return this.numbers.filter(number => number %2 === 0)
  }
}

<ul v-for"set in sets">
  <li v-for="n in event(set)">{{ n }}</li>
</ul>

data: {
	sets: [[1,2,3,4,5],[6,7,8,9,10]]
},
methods: {
	even(numbers){
		return numbers.filter(number => number%2 === 0)
  }
}

<button @click="greet"></button>

<button @click="alert(msg)"></button>

<button @click="warn('msg', $event)"></button>

<input v-bind:value="search" v-on:input="search=$event.target.value" />

<custom-input
	v-bind:value="search"
	v-on:input="search = $event"
><custom-input>
//组件代码应为
<input v-bind:value="value"
			 v-on:input="$emit('input',$event.target.value)"
/>

<template>
  <div>
    <ul>
        <li>{{computedValue}}</li>
        <li>{{computedValue}}</li>
        <li>{{computedValue}}</li>
    </ul>
    <ul>
        <li>{{methodsValue}}</li>
        <li>{{methodsValue}}</li>
        <li>{{methodsValue}}</li>
    </ul>
    <ul>
        <li>{{watchValue}}</li>
        <li>{{watchValue}}</li>
        <li>{{watchValue}}</li>
    </ul>
		<button @click="changeValue">change</div>
  </div>
</template>
<script>
    data(){
      return {
        value: 1,
        watchValue:1
      }
    },
    watch:{
        value(val){
            console.log("watch");
            //刚加载并未执行,因为没有发生变化.
            //再次点击change,只打印一次
            //如果要加载就执行,可添加immediate,函数就变成handler
            this.watchValue = val + 1
        }
    },
    computed: {
        computedValue(){
            console.log('computedValue'); //打印1次,有缓存,不变化不重复计算
      	    return this.value + 1
      }
    },
    methods:{
        methodsValue(){
            console.log('methodsValue'); //打印3次
            return this.value + 1
      },
        changeValue(){
            this.value = 2
        }
    }
}
</script>