Doreen's Blog

// 源码
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("div", null, "Hello World!"),
    _createVNode("h1", {
      title: _ctx.haha,
      value: _ctx.hh
    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["title", "value"])
  ], 64 /* STABLE_FRAGMENT */))
}
/*
不需要遍历节点一一对比
对动态的组件进行标记（只比较标记的内容）
数字的不同表示了 比较的内容不同
不需要针对整个节点去改变，只需要针对特定的内容去重新渲染

9 ---> 代表他动态的内容为 text 和 props
改变的时候只需要改变文本内容和属性
*/

// 源码
// 静态提升之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("div", null, "Hello World!"),
    _createVNode("h1", {
      title: _ctx.haha,
      value: _ctx.hh
    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["title", "value"])
  ], 64 /* STABLE_FRAGMENT */))
}

// 静态提升之后
const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "Hello World!", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _hoisted_1,
    _createVNode("h1", {
      title: _ctx.haha,
      value: _ctx.hh
    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["title", "value"])
  ], 64 /* STABLE_FRAGMENT */))
}

/*
每次render的时候全部内容会重新创建一次，会造成额外的内存消耗
通过把静态的节点提取为全局变量
所以就只需要创建一次
组件渲染的时候只需要调用就行了
*/

// 开启事件侦听之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("button", { onClick: _ctx.handleClick }, "按钮", 8 /* PROPS */, ["onClick"]))
}

// 开启事件侦听之后
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("button", {
    onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick(...args)))
  }, "按钮"))
}
/*
开启之前，通过静态标记的形式来实现 ==> 比较属性（但是方法是不变的）
开启之后，不使用静态标记，所以不会进行比较。通过一个变量对方法进行缓存，下次在调用的时候直接从缓存中获取，不去再次创建整个函数
*/

/*
实现一个功能就需要
在data内定义数据，
在methods / computed / watch 中实现业务逻辑来操作数据
造成 数据和业务逻辑 分散
*/
<template>
  <div>
    <form>
      <input placeholder="id" type="text"  v-model="info.id" />
      <br>
      <input placeholder="name" type="text" v-model="info.name" />
      <br>
      <input type="submit" @click="handleAdd" />
    </form>
    <ul>
      <li
        v-for="(item,index) in list"
        :key="item.id"
        @click="handleRemove(index)"
      >{{item.name}} ----- {{ index }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      info: {
        id:'',
        name:''
      },
      list: [
        { id: 0, name: "jjj" },
        { id: 1, name: "hhh" },
        { id: 2, name: "0hh" },
      ],
      itemRefs: [],
    };
  },
  methods: {
    handleRemove(index) {
      this.list.splice(index, 1);
    },
    handleAdd(e){
      e.preventDefault();
      console.log(this.info)
      this.list.push(this.info)
      this.info = {
        id:'',
        name:''
      }
    }
  },
};
</script>

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="handleAdd">添加</button>
  </div>
</template>

<script>
// 只能监听简单类型的变化，不能监听复杂类型的变化
import { ref } from "vue";

// 监听复杂类型的变化
import { reactive } form "vue";

export default {
  name: "App",

  // setup为组合函数的入口函数
  setup() {
    // 定义变量和初始化变量 count是一个对象，value是他的值
    let count = ref(0);

    // 定义方法
    function handleAdd(){
      count.value ++
    }

    // 暴露变量和方法以供使用
    return { count,handleAdd }
  },
};

// 可以将setup里面的内容单独抽离出来

export default {
  name: "App",
  setup() {
    let { obj, handleRemove } = useRemove();
    return { obj, handleRemove };
  }
}

function useRemove() {
  let obj = reactive({
    arr: [
      { id: "1", name: "dorren" },
      { id: "2", name: "jerry" },
    ],
  });
  function handleRemove(index) {
    obj.arr.splice(index, 1);
  }
  return { obj, handleRemove };
}
// 使用的时候通过obj.arr使用


// 抽离方式2
import { time, handleChange } from "./hooks/useGetTime.ts";
export default {
  setup() {
    return { time, handleChange };
  }
}

// ./hooks/useGetTime.ts
import { ref } from 'vue'
let time = ref("00:00:00");
let handleChange = () => {
    let date = new Date();
    const hour =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    const min =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    const sec =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    time.value = hour + ":" + min + ":" + sec;
    setTimeout(() => {
        handleChange()
    }, 1000);
};
export { time, handleChange }

  <div>
    <form>
      <input placeholder="id" type="text" v-model="info.info.id" />
      <br />
      <input placeholder="name" type="text" v-model="info.info.name" />
      <br />
      <button @click="handleAdd">添加</button>
    </form>
    <h1
      v-for="(item,index) in obj.arr"
      :key="item.id"
      @click="handleRemove(index)"
    >{{item.name}}---{{item.id}}</h1>
  </div>

<script>
import { reactive } from "vue";

export default {
  name: "App",
  setup() {
    let { obj, handleRemove } = useRemove();
    // 参数传递
    let { info, handleAdd } = useAdd(obj);

    return { obj, handleRemove, info, handleAdd };
  },
};

function useRemove() {
  let obj = reactive({
    arr: [
      { id: "1", name: "dorren" },
      { id: "2", name: "jerry" },
    ],
  });

  function handleRemove(index) {
    obj.arr.splice(index, 1);
  }
  return { obj, handleRemove };
}

function useAdd(obj) {
  let info = reactive({
    info: {
      id: "",
      name: "",
    },
  });
  
  function handleAdd(e) {
    e.preventDefault();
    const item = Object.assign({}, info.info);
    obj.arr.push(item);
    info.info.id = "";
    info.info.name = "";
  }
  return { info, handleAdd };
}
</script>

import { isRef,isReactive } from 'vue'

setup() {
  let num = ref(99)
  console.log( isRef(num) )  // true
  console.log( isReactive(num) )  // false
}

import { shallowReactive } from "vue";
export default {
  name: "App",
  data() {
    return {};
  },
  setup() {
    let date = shallowReactive({
      date: 'hhh',
      obj: {
        name:'doreen',
        son: {
          name: 'jerry'
        }
      }
    });
    function handleAdd() {
      // 第一层数据改变，点击事件后，页面数据更新
      date.data = 'eee'
      date.obj.name = 'sherry'
      date.obj.son.name = 'kris'
      
      // 第一层数据没有改变，点击事件后，数据改变页面没有更新
      date.obj.name = 'sherry'
      date.obj.son.name = 'kris'
      
    }

    return { date, handleAdd };
  },
};

import { triggerRef } from 'vue'
...

date.value.son.name = 'kris'
triggerRef(date);

...

import { reactive,toRow } from "vue";
export default {
  setup() {
    let obj = { name: "doreen",sex: "女" };
    let state = reactive(obj);
    let obj2 = toRaw(state); // 获取ref / reactive 的原始数据
    // let state = ref(obj);
    // let obj2 = toRow(state.value)  // ref需要通过.value获取原始数据


    // console.log(obj === obj2); // true
    // console.log( obj === state )    false
    /*
    state 和 obj ：
    引用关系，state本质是一个proxy对象，在这个proxy对象中引用了obj
    */
    function handleChange() {
      /*
      直接修改 obj 无法触发更新
      通过proxy对象包装后，才能触发页面更新
      */
      obj.name = "sherry";
      console.log(obj);    // { name:'sherry',sex:'女' }
      console.log(state);  // { name:'sherry',sex:'女' }
    }

    return { obj, state, handleChange };
  },
};

setup() {
    let obj = markRaw({
      name: "doreen",
      sex: "女",
    });
    let state = ref(obj);
    
    function handleChange() {
      // 不触发页面更新
      obj.name = "sherry";
      console.log(obj); // { name:'sherry',sex:'女' }
      console.log(state); // { name:'sherry',sex:'女' }
    }

    return { state, handleChange };
  },

setup() {
    let obj = {
      name: "doreen",
    };
    /**
     * let state = ref(obj.name)
     * => let state = ref('doreen')
     * => let state = reactive({ value: 'doreen' })
     */
    let state = ref(obj.name);
    
    function handleChange() {
      state.value = "sherry";
      /**
       * 如果利用ref将某一个对象中的属性变成响应式的数据
       * 我们修改的响应式数据不会影响到原始数据
       */
      console.log(obj); // { name:'doreen' }
      console.log(state); // { value: 'sherry' }
    }

    return { state, handleChange };
  }

setup() {
    let obj = {
      name: "doreen",
    };
    /*
    ref和toRef的区别：
    ref -> 复制，修改响应式数据不会影响以前的数据
           数据发生改变，界面就会自动更新
    
    toRef -> 引用，修改响应式数据会影响以前的数据
             数据发生改变，界面也不会自动更新
    */
    let state = toRef(obj,'name');
    console.log(state)
    function handleChange() {
      state.value = "sherry";
      /**
       * 如果利用toRef将某一个对象中的属性变成响应式的数据
       * 我们修改的响应式数据会影响到原始数据
       * 如果响应式的数据通过toRef创建的，修改数据并不会触发界面更新
       */
      console.log(obj); // { name:'sherry' }
      console.log(state); // { value: 'sherry' }
    }

    return { state, handleChange };
  },

import { customRef } from "vue";

// 自定义 ref
function myRef(value) {
  // track -> 追踪  trigger -> 触发
  // 没有这两个参数，ui界面就不会被触发更新
  return customRef((track,trigger) => {
    return {
      get() {
        track() // 告诉vue 数据需要被追踪变化的 
        console.log("get:", value);
        return value;
      },
      set(newV) {
        console.log("set:", newV);
        value = newV
        trigger() // 触发更新
      },
    };
  });
}
export default {
  setup() {
    let state = myRef(15);
    function handleChange() {
      state.value++;
    }
    return { state, handleChange };
  },
};

 import { customRef } from "vue";
 function myRef(value) {
  // track -> 追踪  trigger -> 触发
  return customRef((track, trigger) => {
    // 在get之前对数据进行赋值 不会造成重复刷新
    fetch(value)
      .then((res) => {
        return JSON.json();
      })
      .then((data) => {
        console.log(data);
        value = data;
        trigger(); // 获取数据、刷新页面
      })
      .catch((err) => {
        console.log(err);
      });

    return {
      get() {
        track(); // 数据需要被追踪变化的
        console.log("get:", value);
        return value;
      },
      set(newV) {
        console.log("set:", newV);
        value = newV;
        trigger(); // 触发更新
      },
    };
  });

} 
export default {
  setup() {
    let state = myRef('../public/data.json');
    return { state };
  },
}; 

<h1 ref="box"></h1>


import { ref, onMounted } from "vue";
export default {
  setup() {
    let box = ref(null);
    
    onMounted(() => {
      console.log(box.value); // <h1></h1>
    });
    // setup的生命周期在beforeCreated之前 
    console.log(box.value) // null
    return { box };
  },
};

import { readonly } from "vue";
export default {
  setup() {
    let box = readonly({
      name: "doreen",
      attr: {
        age: 12,
      },
    });

    function handleChange() {
      box.name = "sherry";
      box.attr.age = 22;

      console.log(box);
      /**
       * {
          name: "doreen",
          attr: {
              age: 12,
          },
        }
       */
    }
    return { box, handleChange };
  },
};

import { shallowReadonly } from "vue";
export default {
  setup() {
    let box = shallowReadonly({
      name: "doreen",
      attr: {
        age: 12,
      },
    });

    function handleChange() {
      box.name = "sherry";
      box.attr.age = 22;
      
      console.log(box);
      /**
       * {
          name: "doreen",
          attr: {
              age: 22,
          },
        }
       */
    }
    return { box, handleChange };
  },
};

isReadonly(state) // true / false

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error

let msg = ref("title");
let str = computed({
  get: () => msg.value + " get ",
  set: (val) => {
    msg.value = val + " set ";
  },
});

console.log(str.value);   // title get
str.value = "set value";  // set value

import { watch } from 'vue'

// ...
    // 多个观察对象 watch([val1,val2 ... ],([])=>{ ... })
    watch(msg, (newV, oldV) => {
      console.log(newV, oldV);
    });

// ...

function shallowReactive(obj){
    return new Proxy(obj,{
        get(obj,key){
            return obj[key]
        },
        set(obj,key,value){
            obj[key] = value
            return true
        }
    })
}
var obj = {name:'doreen'}
var state = new shallowReactive(obj)
state.name = 'sherry' // { name: 'sherry' }

function shallowRef(val){
    return shallowReactive({value: val})
}
function shallowReactive(obj){
    return new Proxy(obj,{
        get(obj,key){
            return obj[key]
        },
        set(obj,key,value){
            obj[key] = value
            return true
        }
    })
}

var obj = {name:'doreen'}
var state = new shallowRef(obj)
state.value.name = 'haha' // { value: { name: 'haha' } }

function shallowReadonly(obj) {
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key]
        },
        set(obj, key, value) {
            console.warn('只读 不能被赋值')
        }
    })
}

function reactive(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) {
            obj.forEach((item, index) => {
                if (typeof item === 'object') {
                    obj[index] = reactive(item)
                }

            })
        } else {
            for (let key in obj) {
                let item = obj[key];
                if (typeof item === 'object') {
                    obj[key] = reactive(item)
                }
            }
        }
    } else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key]
        },
        set(obj, key, value) {
            obj[key] = value
            return true
        }
    })
}

function ref(val) {
    return reactive({ value: val })
}
function reactive(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) {
            obj.forEach((item, index) => {
                if (typeof item === 'object') {
                    obj[index] = reactive(item)
                }

            })
        } else {
            for (let key in obj) {
                let item = obj[key];
                if (typeof item === 'object') {
                    obj[key] = reactive(item)
                }
            }
        }
    } else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key) {
            console.log(obj, key)
            return obj[key]
        },
        set(obj, key, value) {
            obj[key] = value
            console.log(obj)
            return true
        }
    })
}

function readonly(obj) {
    if (typeof obj === 'object') {
        if (obj instanceof Array) {
            obj.forEach((item, index) => {
                if (typeof item === 'object') {
                    obj[index] = readonly(item)
                }

            })
        } else {
            for (let key in obj) {
                let item = obj[key];
                if (typeof item === 'object') {
                    obj[key] = readonly(item)
                }
            }
        }
    } else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key) {
            return obj[key]
        },
        set(obj, key, value) {
            console.warn('不能被赋值')
        }
    })
}

statusType = [{
    key:"",
    value:""
}]

<el-form-item
    prop="valueRange"
    v-for="item in statusType"
    :key="item.key"
    :value="item.key"
>
    <el-col :span="10">
        <el-input placeholder="值" v-model="item.key"></el-input>
    </el-col>
    <el-col :span="4" style="text-align:center">:</el-col>
    <el-col :span="10">
        <el-input placeholder="名称" v-model="item.value"></el-input>
    </el-col>
</el-form-item>

<el-form-item
    prop="valueRange"
    v-for="(item,index) in statusType"
    :key="index"
    :value="item.key"
>
    <el-col :span="10">
        <el-input placeholder="值" v-model="item.key"></el-input>
    </el-col>
    <el-col :span="4" style="text-align:center">:</el-col>
    <el-col :span="10">
        <el-input placeholder="名称" v-model="item.value"></el-input>
    </el-col>
</el-form-item>

<detail-table :key="timer" :id="selectedId" @success="forceRefresh"></detail-table>

private timer: number = new Date().getTime();

private handleRowClick(row: any) {
    this.timer = new Date().getTime();
    this.selectedId = row.inboundOrderSn ? row.inboundOrderSn : '';
}

import {mapState} from 'vuex'
…
computed: {
    ...mapState([
 			  /**
             *  当映射的计算属性的名称与state的子节点名称相同
             * 我们可以直接给mapState传一个字符串数组
             */
            'name',  //映射 this.name 为 store.state.name
            'age'
        ])

    ...mapState({
            vName:  state=>state.name,  //映射 this.vName 为 store.state.name
            vAge:  state =>state.age
        })

    },

computed: {
        ...mapGetters({
            name: 'NAME'    //异名映射
        }),
        ...mapGetters([
            'NAME'      //同名映射
        ])
    },

methods: {
    ...mapMutations([
      "increment", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
]),
    ...mapMutations({
      add: "increment" // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

export default {
    props: {
        propA: {
            type: Number,
            // type: [ String,Boolean ]
            // default: 'value'
            // default: function (){ return 'hello' }
            // required: true
        }
    }
}

import DetailTable from './components/detail-table.vue';

export default {
    components: {
        DetailTable
    },
}

watch: {
    msg: [
        {
            handler: 'onMsgChange',
            immediate: false,
            deep: false
        }
    ]
  },
  methods: {
      onMsgChange(newValue,oldValue) { }
  }

export default {
    data (){
        count: 0
    },
    methods: {
        addToCount(n) {
            this.count += n
            this.$emit('add-to-count',n)
        },
        resetCount() {
            this.count = 0
            this.$emit('reset')
        }
    }
}