vue知识点

最新推荐文章于 2024-01-03 15:23:17 发布

原创最新推荐文章于 2024-01-03 15:23:17 发布

· 110 阅读

0 ·

版权

前端专栏收录该内容

26 篇文章

订阅专栏

vue父子组件通信

props，$ emit , vuex , provide/inject , $ attrs/$ listeners，$root , $parent, $refs, eventBus

vue为什么不兼容ie8

因为ie8没有实现Object.defineProperty()

input的input事件会自带event参数，如何同时绑定其他参数

@input="(event)=>{handleInput(event,‘加参数’)}"

js实现简单的双向绑定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

v-model如何实现

通过Object.defineProperty进行数据劫持
v-bind绑定一个value属性
v-on指令给当前元素绑定input（input,textarea）、change（select,checkbox,radio）事件。

v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？

v-for优先级高；为了实现

类似的过滤；会先执行完v-for再执行v-if导致性能浪费，所以优化为把v-if提升到父标签上，或者在computed里面过滤

用户自定义watch有哪些参数

handle(newVal,oldVal){}
deep 是否深监听触发
immediated 是否立刻触发一次
asyn 是否在当前tick执行，默认false。tick表示nextTick的queueWatcher

assets和static文件夹区别

assets文件夹会被webpack打包压缩，而static不会

SPA首屏加载慢如何解决

动态懒加载所需插件；使用CDN资源；vue-ssr

vue-ssr用于解决什么痛点

首屏加载慢；SEO优化

vue-router的query和params传参区别

query通过url传参，刷新页面还在
params刷新页面不在了

$ route和$ router区别
$ router是VueRouter的实例，使用$ router.push方法导航。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

介绍vuex
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
modules里面如果主动写namespace为true, 会导致modules里面的actions\mutaions\gatters变成局部作用域