# 面试题

// 绑定自定义事件 
mouunted() {
    event.$on('onAddTitle',this.handleEvent)
}

// 解绑事件
beforeDestroy() {
    // 及时销毁，否则会造成内存泄漏
    event.$off('onAddTitle',this.handleEvent)
}
 
// 调用自定义事件
event.$emit('onAddTitle',val)

export default {
    data() {
        return {
            city: "成都"
        }
    },
    methods: {
        showName() {
            console.log(this.name)
        }
    },
    mounted() {
        console.log('mixin mounted',this.name)
    },
}

const User = {
    template: `<div>{{$router.params.id}}</div>`
}

const router = new VueRouter({
    routes: [
        // 动态路径参数 以冒号开头 能命中 `/user/10` `/user/20` 等格式的路由
        {path: '/user/:id', component: User}
    ]
})

const router = new VueRouter({
    routes: [
        // 动态路径参数 以冒号开头 能命中 `/user/10` `/user/20` 等格式的路由
        {
            path: '/user/:id', 
            component: () => import('./components/User.vue') 
        }
    ]
})

// 触发更新视图
function updateView() {
    console.log("视图更新")
}

// 重新定义属性,监听起来

function defineReactive(target, key, value) {
    // 核心API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // 设置新值
                // 注意,value一直在闭包中,此处设置完之后,再get时也是
                value = newValue

                // 触发视图
                updateView()
            }
        }
    })
}

// 监听对象

function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象数组
        return target
    }

    // 重新定义各个属性 (for in 也可以遍历数组)
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: "hanzo",
    age: 20,
    // info: {
    //     address: "成都"
    // },
    // nums: [1,2,3]
}

// 监听数据
observer(data)

// 测试
data.name = "genji"
data.age = 18

// 触发更新视图
function updateView() {
    console.log("视图更新")
}

// 3.
// 重新定义数组原型
const oldArrayProperty = Array.prototype;
// 创建新对象，原型指向 oldArrayProperty，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
    arrProto[methodName] = function () {
        updateView() // 触发视图更新
        oldArrayProperty[methodName].call(this, ...arguments)
    }
})

// 重新定义属性,监听起来

function defineReactive(target, key, value) {

    // 1. 深度监听
    observer(value)

    // 核心API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // 1. 深度监听
                observer(newValue)

                // 设置新值
                // 注意,value一直在闭包中,此处设置完之后,再get时也是能获取最新值
                value = newValue

                // 触发视图
                updateView()
            }
        }
    })
}

// 监听对象

function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象数组
        return target
    }

    // 3
    if (Array.isArray(target)) {
        target.__proto__ = arrProto
    }

    // 重新定义各个属性 (for in 也可以遍历数组)
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: "hanzo",
    age: 20,
    info: {
        address: "成都" // 1. 需要深度监听
    },
    nums: [1, 2, 3]
}

// 监听数据
observer(data)

// 测试
data.name = "genji"
// data.age = 18
data.age = { num: 21 }
data.age.num = 22
data.info.address = "达州"
data.x = "100" // 新增属性，监听不到 --- 所有有了 Vue.set
delete data.name // 删除属性，监听不到 --- 所有有了 Vue.delete
data.nums.push(4)

{
    tag: 'div',
    props: {
        className: "container",
        id: "div1"
    },
    children: [
        {
            tag: 'p',
            children: 'vdon'
        },
        {
            tag: 'ul',
            props: {
                style: "font-size: 20px"
            },
            children: [
                {
                    tag: "li",
                    children: 'a'
                }
            ]
        }
    ]
}

const obj = { a: 100, b: 200 }
console.log(obj.a) // 100
console.log(obj.b) // 200
console.log(obj.c) // undefined

// --------------------------------

// 使用with,能改变 {} 内自由变量的查找方式
// 将 {} 内自由变量,当做 obj 的属性来查找
with(obj) {
    console.log(a) // 100
    console.log(b) // 200
    console.log(c) // c is not defined
}

const compiler = require('vue-template-compiler')

// 插值

// const template = `<p>{{message}}</p>`
// with(this){return _c('p',[_v(_s(message))])}
// with(this){return crateElement('p',[createTextVNode(toString(message))])}


// 表达式
// const template = `<p>{{flag ? message : 'no message found'}}</p>`
// with(this){return _c('p',[_v(_s(flag ? message : 'no message found'))])}

// 属性和动态属性
// const template = `
//     <div id="div1" class="container">
//         <img :src="imgUrl" />
//     </div>
// `
// with(this){return _c('div',{staticClass:"container",attrs:{"id":"div1"}},[_c('img',{attrs:{"src":imgUrl}})])}

// 条件
// const template = `
//     <div>
//         <p v-if="flag === 'a'">A</p>
//         <p v-else">B</p>
//     </div>
// `
// with(this){return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_e(),_v(" "),_v("\">B"),_c('p')])}


// 循环
// const template = `
//     <ul>
//         <li v-for="item in list" :key="item.id">{{item.title}}</li>
//     </ul>
// `
// with(this){return _c('ul',_l((list),function(item){return _c('li',{key:item.id},[_v(_s(item.title))])}),0)}

// 事件
// const template = `
//     <button @click="clickHandler">submit</button>
// `
// with(this){return _c('button',{on:{"click":clickHandler}},[_v("submit")])}


// v-model
const template = `<input type="text" v-model="name" />`
// with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}})}

// render 函数
// 返回 vnode

// 编译
const res = compiler.compile(template)
console.log(res.render)


// 从vue源码中找到缩写函数的含义

// function installRenderHelpers(target) {
//     target._o = markOnce
//     target._n = toNumber
//     target._s = toString
//     target._l = renderList
//     target._q = looseEqual
//     target._i = looseIndexOf
//     target._m = renderStatic
//     target._f = resolveFilter
//     target._k = checkKeyCodes
//     target._b = bindObjectProps
//     target._v = createTextVNode
//     target._e = createEmptyVNode
//     target._u = resolveScopedSlots
//     target._g = bindObjectListeners
//     target._d = bindDynamicKeys
//     target._p = prependModifier
// }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>histroy API test</p>
    <button id="btn1">修改 url</button>

    <script>
        // 初次加载页面，获取 hash
        document.addEventListener('DOMContentLoaded', () => {
            console.log('load', location.pathname)
        })

        // 打开一个新的路由
        // 使用 pushState 方式，浏览器不会刷新页面
        document.getElementById("btn1").addEventListener("click", () => {
            const state = { name: 'page1' }
            console.log('切换路由到:', 'page1')
            history.pushState(state, '', 'page1')
        })

        // 监听浏览器前进、后退
        window.onpopstate = function (event) {
            console.log("onpopstate", event.state, location.pathname)
        }


    </script>
</body>
</html>